- HTML版本
- HTML 1991年
- HTML 1993年
- HTML 2.0 1995年
- HTML3.2 1997年
- HTML4.01 1999年
- XHTML1.0 2000年
- HTML5 2012年
- XHTML5 2013年
- 结构<HTML>所有内容在这里面</HTML>
- 文档标记
- 文档声明
- HTML 5 <!DOCTYPE html>
- HTML 4.01 Strict <IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
- HTML 4.01 Transitional <IDOCTYPE HTML PUBLIC "-/W3C//DTD HTML4.01 Transitional//EN' "http:/www.w3.org/TR/html4/loose.dtd">
- HTML 4.01 Frameset <IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Frameset/EN" "http://www.w3.org/TR/html4/frameset.dtd"
- 常用标记
- 元数据标记<META>定义HTML页面中的相关信息
- <META NAME=""CONTENT="">
- <metaname=“keywords” content=“html, xhtml,css,javascript">
- <metaname=“description” content=“这是一个网页的描述">
- 对于中文网页需要使用
- <metacharset="utf-8"> 声明编码，否则会出现乱码。
- 元数据标记<META>定义HTML页面中的相关信息
- 文档声明
- 头部标记
- 头部标记（<head>…</head>）
- 包含文档的标题信息，头部标记都不可或缺
- 主体标记
- 主体标记（<body>…</body>）
- 包含了文档的内容
- 网页基本结构 <!DOCTYPE html> <html> <head> <title>网页标题</title> <meta charset="utf-8"> <meta name="keywords" content="关键词1，关键词2，..."> <meta name="description" content="网站描述..."> </head> <body></body> </html>
- 文档标记
- 基本信息
- HTML使用标记标签来描述网页
- HTML是用来描述网页的一种语言。
- HTML指的是超文本标记语言: HyperText Markup Language
- HTML不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
- HTML标签
- HTML标记标签通常被称为 HTML 标签 (HTMLtag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- 标签分类
- 双标记标签
<开始标签></结束标签>- 块级标签 （独占一行）
- <p>…</p>定义了一个段的块级标记
- <p>Myfirst Paragraph.</p>
- <p>Mysecond Paragraph.</p>
- 块元素，独占一行
- 宽度不设置时，
- 标题标签 h1~h6
- 字体默认加粗，h1标题内容最大 h6最小，字体依次变小
- <p>…</p>定义了一个段的块级标记
- 行内标签
- 行内块标签
- 块级标签 （独占一行）
- 单标签
<标签名>- （行内块标签） <img>行内标记定义了一个行内图像，使用格式如下所示。
- <img src="lotus.jpg"alt="莲花之美">
- <img/>标签的重要属性
- width=“ 宽 ” height=" 高 "
- 注意：网页中的长度单位多使用px,即像素
- 图片大小 即 (宽度)和(高度)
- 图片的宽和高 只修改一个 图片不改变，同时修改 宽和高 图片会变形
- 宽和高单位是百分比的话，图片随浏览器大小改变而改变
- title="提示文本" 在鼠标放置图片上面时提示的文本
- 注意：多数标签都有此属性，但浏览器的支持不全面
- src 引入图片的路径
- alt 图片替代文本
- 图片提示
- 在网络较慢的环境中，如果没有出现图片，那么将以图片替代文本显示
- width=“ 宽 ” height=" 高 "
- <img/>标签的重要属性
- 路径问题
- 相对路径
- Html文档和图片在同一个目录下，直接写图片名称
- Html文档和图片所在的文件夹在同一个目录下，先写文件夹名称，再写图片名称
- Html文档所在文件夹和图片所在文件夹在同一个目录下，则需要先用 （../”找到上级目录），再写图片所在文件夹的名称，最后写图片名称 （./ 当前目录）写图片名称
- 根文件夹
- 子文件夹
- 当前网页
- 图片文件夹
- 图片
- 子文件夹
- 根文件夹
- 子文件夹
- 当前网页
- 图片文件夹
- 图片
- 子文件夹
- 绝对路径
- 就是你的主页上的文件或目录在硬盘上真正的路径 如：C:\Users\Administrator\Pictures\1.JPG
- 相对路径
- <img src="lotus.jpg"alt="莲花之美">
- （行内块标签） <img>行内标记定义了一个行内图像，使用格式如下所示。
- 双标记标签
- 注释：
- 快捷键 ：ctrl+/
- 例子 如：
- <!-- 这里是注释 -->
- 注释是给程序员看的，注释不展示在浏览器页面
- 列表标签
- 1.无序列表 列表项无先后顺序
- 语法： <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>
- 注意：
- 1，ul中只能嵌套li，直接在ul标签中输入其他标签或者文字的做法是不被允许的；
- 2，li之间相当于一个容器，可以容纳所有元素，li是块级标签
- 3，无序列表会带有自己样式属性，一般都清除掉，让css来处理；
- 属性：type，定义每个列表项前面的符合标记
- disc（圆点）
- square（方块）
- circle（圆圈）
- 符号名称可用的值为：
- disc : CSS1 实心圆
- circle : CSS1 空心圆
- square : CSS1 实心方块
- decimal : CSS1 阿拉伯数字
- lower-roman : CSS1 小写罗马数字
- upper-roman : CSS1 大写罗马数字
- lower-alpha : CSS1 小写英文字母
- upper-alpha : CSS1 大写英文字母
- none : CSS1 不使用项目符号
- armenian : CSS2 传统的亚美尼亚数字
- cjk-ideographic : CSS2 浅白的表意数字
- georgian : CSS2 传统的乔治数字
- lower-greek : CSS2 基本的希腊小写字母
- hebrew : CSS2 传统的希伯莱数字
- hiragana : CSS2 日文平假名字符
- hiragana-iroha : CSS2 日文平假名序号
- katakana : CSS2 日文片假名字符
- katakana-iroha : CSS2 日文片假名序号
- lower-latin : CSS2 小写拉丁字母
- upper-latin : CSS2 大写拉丁字母
- 2.有序列表 列表项有先后顺序
- 语法： <ol> <li>列表项1</li> < li>列表项2</li> <li>列表项3</li> </ol>
- 表现形式：
- 1，特性基本与ul 一致
- 2，实际开发中用的较少
- 3.自定义列表
- 属性 ：
- 没有什么特殊属性
- 语法：
- <dl>
- <dt>项目1</dt>
- <dd>内容1</dd>
- <dt>项目2</dt>
- <dd>内容2</dd>
- </dl>
- 说明
- dl dt dd 定义列表常用于对术语，名词，事件，时间点进行解释和描述，定义列表的列表项前没有任何项目符号。
- dl: d是定义的英文的简写 l是list的简写 defination
- dt: t是title的意思 title是标题的意思 标题可以是术语，名词，事件，时间
- dd: d是定义的意思 第2个d是描述的意思 description
- 属性 ：
- 1.无序列表 列表项无先后顺序
- 元素分类：
- 1，块元素
display: block :- 常见块级元素
- ◎ div - 常用块级标签
- ◎ dl - 定义列表
- ◎ h1 - 大标题
- ◎ h2 - 副标题
- ◎ h3 - 3级标题
- ◎ h4 - 4级标题
- ◎ h5 - 5级标题
- ◎ h6 - 6级标题
- ◎ hr - 水平分隔线
- align 水平对齐方式
- cebter 居中对齐
- left 左对齐
- right 右对齐
- align 水平对齐方式
- ◎ ol - 排序表单
- ◎ p - 段落
- ◎ table - 表格
- ◎ ul - 非排序列表（无序列表）
- 特点：
- 1，独占一行
- 2，宽度默认受浏览器影响
- 3，块元素里可以嵌套任何元素（<p>元素除外）
- 常见块级元素
- 2，行内元素
display: inline :- 常见的行内元素：
- ◎ a - 锚点
- ◎ b - 粗体(不推荐)
- ◎ i - 斜体
- ◎ big - 大字体
- ◎ br - 换行
- ◎ code - 计算机代码(在引用源码的时候需要)
- ◎ dfn - 定义字段
- ◎ em - 强调
- ◎ font - 字体设定(不推荐) （html5取消了该标签）
- ◎ img - 图片
- ◎ input - 输入框
- ◎ label - 表格标签
- ◎ q - 短引用
- ◎ small - 小字体文本
- ◎ span - 常用内联容器，定义文本内区块
- ◎ s - 中划线(不推荐)
- ◎ strike - 中划线
- ◎ strong - 粗体强调
- ◎ sub - 下标
- ◎ sup - 上标
- ◎ textarea - 多行文本输入框
- ◎ u - 下划线
- 特殊符号
- < 小于号
- > 大于号
- 空格
-   空格
-   空格（以上空格的两倍 一个字大小）
- © 版权符号
- × “x”小叉符号
- • 小圆点符号
- 特点
- 1，可以和其他元素在一行显示
- 2，宽度只受内容的影响
- 3，行内元素里可以嵌套行内元素，行内块元素，以及文本！
- 常见的行内元素：
- 3，行内块元素
display: inline-block :- <input>
- <img>
- 4，文本格式化标签（行内元素）
- <b></b> 和<strong></strong> 文本以粗体方式显示，推荐使用strong strong标签更有强调意味
- <i></i> 和 <em></em> 文本以斜体方式显示，推荐使用em em标签更有强调意味
- <s></s> 和 <del></del> 文本以加删除线方式显示，推荐使用del
- <u></u> 和 <ins></ins> 文本以加下划线方式显示，推荐使用ins
- 1，块元素
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
