您的位置：首页 > Web前端 > HTML5

HTML5第一阶段（第一章HTML基础）

2017-12-23 14:41 846 查看

目录：

一、WEB标准的概念及组成

二、HTML及相关概念的介绍

三、HTML5基本结构

四、HTML基本语法

五、HTML常用标记

一、WEB标准的概念及组成

1.1
WEB标准不是某一个标准，而是一系列标准的集合。
网页主要由三部分组成：结构，表现，行为。
1.2
W3C制定：结构和表现的标准
ECMA制定：行为
1.3
结构化标准语言：XHTML、XML
表现标准语言：CSS
行为标准：对象模型{W3C DOM}、ECMAScript
1.4
W3C{world wide web consortium万维网联盟}
ECMA制定的{欧洲电脑厂商联合会}

二、HTML及相关概念的介绍

2.1
HTML指的是超文本标记语言{hyper text markup language}
XHTML指的是可拓展超文本标记语言{EXtensible hyper text markup language}
HTML5是W3C和WHATWG合作的结果
2.2
W3C：从HTML1.0到HTML4.01；从XHTML1.0到XHTML2.1
WHATWG:HTML5

三、HTML5基本结构

3.1
HTML页面是由标签和属性构成
3.2 HTML架构
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
定义文档类型有三种：Strict（严格型)、 Trasitional（过渡型）、Frameset（框架型）
<html></html>    html的根元素
<head></head>    文件头
<body></body>    文件主体
<meta /> 设置字符集、内容类型、编码格式
<title></title>       文件标题
3.3 注意点
标签名和属性名称必须小写
HTML标签必须关闭
属性值必须用引号括起来
标签必须正确嵌套
必须添加文档类型声明
3.4 HTML5基本结构
<!doctype html> 命名文档类型
<html> 说明我们写的是标记语言
<head>文件头部
<meta charset="utf-8"> 编码格式
<title></title> 文件标题
</head>
<body> 文件主体
<div></div>
</body>
</html>

四、HTML基本语法

4.1 常规标记 也叫双标记
<标记 属性="属性值" 属性="属性值"></标记>
4.2 空标记 也叫单标记
<标记 属性="属性值" / >
4.3 说明
写在<>中的第一个单词叫做标记，标签，元素
标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在“”号内
一个标记可以没有属性也可以有多个属性，属性和属性值之间不分先后顺序
空标记没有结束标签，用“/”代替。例如：<hr />

五、HTML常用标记

5.1 文本标题标签
<h1></h1>……<h6></h6>
5.2 字体标签
<i></i> <em></em> 倾斜
<b></b> <strong></strong> 加粗
<u></u> 下划线
<br /> 换行
<hr /> 水平线
<del></del> 删除
<ins></ins> 插入 经常与del在一起用
<sup></sup> 上标
<sub></sub> 下标
<P ></P> 段落
5.2.1 说明
物理风格:明确指明了字体的类型，无论是何种浏览器，遇到这些表示文字的标签时，
都用相同的方式进行显示。如：b、i、u
逻辑风格:并不能像物理风格那样明确知道字体的显示方式，而是让浏览器自行决定，
不同的浏览器解释的效果可能不一样。如：em、strong、cite、code、small、
big、samp、kbd、var、dfn、sup、sub
5.3 实体标签
  不换行空格
> 右尖括号
< 左尖括号
©备案中图标
5.4 常用标签
<div></div>
<span></span>
5.4.1 说明
div可以把文档分割为独立的、不同的部分。他可以用作严格的组织工具，
并且不使用任何格式与其关联。
在DIV+CSS切图布局重构技术中，提到div，而在html中代码布局使用最多标签为div。
故我们通常将网页重构说成div css制作。
Div本身没有什么特别之处，而div标签替代了以前table标签布局。
他们通过对div标签对象设置不同样式实现我们要的美化效果。
特性，通常一对未设置任何样式的div，独占一行。
span是文本结点，可以是某一小段文本，或是某一个字。
5.5 列表的应用
HTML中有三种列表，分别是无序列表{ul}有序列表{ol}自定义列表{dl}
5.5.1 语法
<ul>
<li>列表项内容</li>
<li>列表项内容</li>
</ul>
<ol>
<li>列表项内容</li>
<li>列表项内容</li>
</ol>
<dl>
<dt>名词</dt>
<dd>解释</dd>
</dl>
5.
ad6e
5.2 说明
无序列表 type值有 circle空心圆、disc实心圆、square方形 也可以设置start参数。
有序列表 type有1数字、a小写、A大写、i、I阿拉伯，也可以设置start参数。
<dl>标记不同于前两种列表，它主要用于解释名词，包含两个层次的列表。
第一层次是需要解释的名词，第二层次是具体的解释。<dd>作为解释的内容在显示时会自动缩进。
在自定义列表中，一个<dt>标记下可以有多个<dd>标记作为名词的解释和说明。
5.6 超链接
5.6.1 URL{统一资源定位符}
5.6.2 语法：
<a href="目标文件路径及全称/连接地址" alt="替换文本" title="提示文本">链接文本/图片</a>
空链接：<a href="#"></a>
5.6.3 说明
url后边跟的是链接页面的路径(包含文件名)
title属性，加入这个属性后，当鼠标移动到热点时，则在鼠标下方显示title的内容
target属性参数定义了打开链接的目标窗口。_blank属性值代表在新窗口中打开链接页面
_self属性值代表在当前窗体打开链接页面，此为默认值。
5.7 图像
5.7.1 语法
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题" />
5.7.2 说明
src表示图片的来源
align标识图片相对于文字的对齐方式，值top、left、right、bottom、middle
border标识图片的边框
width和height设定其图像在页面上显示的宽度和高度
hspace和vspace属性设置图像周围的空间
title是专门做提示信息的，鼠标悬停图片上时显示一个小提示，鼠标离开就没有了
alt是在你的图片因为某种原因不能加载时在页面显示的提示信息
5.7.3 *相对路径的写法
当前文件与目标文件在同一目录下，写目标文件名+扩展名
当前文件与目标文件所在文件夹在同一目录下，写目标文件夹名/目标文件名+扩展名
当前文件所在的文件夹和目标文件所在的文件夹在同一目录下，
写../目标文件所在文件夹名/目标文件名+扩展名
5.8 表格
5.8.1 语法
<table>
<tr>
<td>第一行第一格</td>
<td>第一行第二格</td>
</tr>
<tr>
<td>第二行第一格</td>
<td>第二行第二格</td>
</tr>
</table>
注：一对tr表示一行;一对td表示一列(一个单元格)
5.8.2 相关属性
width="表格的宽度"
height="表格的高度"
border="表格的边框"
bordercolor="边框色"
cellspacing="单元格外间距"
cellpadding="单元格内间距"
align="水平对齐" 取值：left、right、center
valign="垂直对齐" 取值：top、bottom、middle
5.8.3 合并单元格属性
合并列：colspan="合并列数"
合并行：rowspan="合并行数"
5.9 表单
5.9.1 表单的作用
用来收集用户的信息的
5.9.2 表单框
<form name="表单名称" method="post/get" action=""></form>
5.9.3 说明
Post是向服务器上传数据，Get是从服务器获得数据。
出于安全性考虑，建议最好使用 Post 提交数据 action是给后端人员作为接口用的
5.9.4 语法
<input type=" " name=" " value=" " size=" " maxlength=" "/>
5.9.5 说明
input是表单中功能最为丰富的，
input标记可以创建按钮、文本输入框、选择框等各种类型的输入字段。
name标识表单域的名称
type标识表单域的类型，可以是文本输入框text、密码password、复选框checkbox、
单选框radio、提交表单submit和重置键reset
value属性定义表单域的值
maxlength控制最多输入的字符数
size控制框的宽度
5.9.6 常用类型
文本框
<input type="text" value="默认值"/>
密码框
<input type="password" />
提交按钮
<input type="submit" value="按钮内容" />
重置按钮
<input type="reset" value="按钮内容" />
单选按钮
<input type="radio" name="" checked="checked" />(默认选中)
复选框
<input type="checkbox" name="like" disabled="disabled" checked="checked"/>
按钮
<input name="" type="button" value=“按钮内容” />
（button只起到跳转的作用，不进行提交）
下拉菜单
<select name="">
<option>下拉选项1</option>
<option>下拉选项2</option>
</select>
多行文本框
<textarea name="" cols="" rows=""></textarea>
rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航