1.了解本专业课程目标、就业方向
2.了解HTML相关概念(HTML、XHTML、HTML5)
3.常用编辑器及浏览器
4.HTML基础语法
5.站点的创建
6.HTML常用标记
7.项目应用
1.了解本专业课程目标、就业方向
*web标准分三方面:
*组织解析:
(1)W3C( World Wide Web Consortium )万维网联盟,创建于1994年是Web技术领域最具权威和影响力的国际中立性技术标准机构;是专门负责网络标准制定的非赢利组织。制定了结构标准和样式标准;
(2)ECMA:欧洲电脑网商联合会(厂商协会),制定了行为标准
2.了解HTML相关概念(HTML、XHTML、HTML5)
*html的发展史:
*HTML相关概念的介绍:
HTML:指的是超文本标记语言
XHTML:指的是可拓展超文本语言
HTML5:指的是HTML第五次重大修改
*HTML语言的特点:
简易性(HTML版本升级采用超集方式,从而更加灵活方便)
可扩展性(HTML采取子类元素的方式,为系统扩展带来保证)
平台无关性(HTML可以使用在广泛的平台上)
3.常用的浏览器和编辑器
浏览器:谷歌、火狐、IE。欧朋、safari
编辑器:DW(Dreamwaver)、webstorm、hbulider、sublime
*sublime text3常用快捷键
4.HTML基本结构和基础语法
*基本结构
<!DOCTYPE html>`````````````````````````````定义文档类型,此标签可告知浏览器文档使用哪种HTML或XHTML规范
<html>··············································<html></html>称为根标签,所有的网页标签都在<html></html>中
<head>··········································································································
<meta charset="utf-8">···················<head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签。
<title>无标题文档</title>·················
</head>·········································································································
<body>·······································在<body>和</body>标签之间的内容是网页主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
</body>
</html>
*基本语法
1.常规标记
<标记 属性=“属性值” 属性=“属性值”>
2.空标记
<标记 属性=“属性值” />
5.站点的创建
域名注册-租用空间-网站建设-推广-维护
6.HTML常用标记
*h1-h6各种级别文本标题标记
*<p>段落标记</p>
* 空格
*换行<br/>
*<b></b>加粗标记
*<strong></strong>加粗内容
*<em></em>倾斜标记
*<hr/>水平线
*<ul></ul>无序列表
*<ol></ol>有序列表
*<dl></dl>
*img 标签(为网页插入图片)
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题"/>
<a href="目标文件路径及全称">
*table常用标记:
width:表格宽度
height:表格高度
border:表格边框
bgcolor:表格的背景色
cellspacing:单元格与单元格之间的间距
cellpadding:单元格与内容之间的空隙
align:lift、center、right
文本框:<input type="text" value="默认值"/>
密码框:<input type="password"/>
<input type="password" placeholder="密码"/>
提交按钮:<input type="submit" value="按钮内容"/>
重置按钮:<input type="reset" value="按钮内容"/>
单选框/单选按钮
<input type="radio" name="ral"/>
<input type="radio" name="ral"/>
<input type="radio" name="ral" checked="checked"/>
复选框
<input type="checkbox" name="like"/>
<input type="checkbox" name="like"disabled="disabled"/>
select标签(下拉列表框)
<select name="">
<option value="1">选项一</option>
<option value="2"> selected="selected"选项二</option>
</select>
textarea(文本域)
<textarea cols="字符宽度" rows="行数">在这里输入文字</textarea>