HTML
-
概念：一门使用标记或标签来描述网页，展示信息给用户的语言
-
作用：编写制作网页
-
超文本标记语言
-
超文本：页面内可以包含图片、链接、音乐、程序等非文字元素
-
标记：标签，不同的标签实现不同的功能
-
语言：人与计算机的交互工具
-
ＨＴＭＬ书写规范
-
HTML标签是以尖括号包围的关键字
-
HTML标签通常是成对出现的，有开始就有结束
-
独立的标签，开始和结束合并再一次
-
-
HTML通常都有的属性
-
格式：属性=‘属性值’
-
多个属性之间空格隔开
-
-
HTML标签不区分大小写，建议全部小写
结构标签
| 标签 | 描述 |
|---|---|
| <html> | 根标签 |
| <head> | 头标签 |
| <title> | 标题标签 |
| <body> | 正文 |
-
<span style="background-color:#f8f8f8"><span style="color:#aa5500"><!--注释内容--></span> <span style="color:#aa5500"><!--文件的声明：标识文件使用html的版本 html5--></span> <span style="color:#555555"><!DOCTYPE html></span> <span style="color:#aa5500"><!--根标签--></span> <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--头标签--></span> <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--元标签，指定网页的编码方式为utf-8--></span> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--标题标签--></span> <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>结构标签<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--正文标签--></span> <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span> 这是一个神奇的网站 <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>
排版标签
-
用于实现简单的页面布局
-
标签 代码 描述 注释标签 <!--注释内容--> 无 换行标签 无 段落标签 <p></p> align:对齐方式，left（左），center（中），right（右） 水平线标签 <hr/> width：水平线的长度，像素或者百分比表示 size：水平线的粗细，像素表示 color：水平线的颜色 align:水平线的对齐方式 -
<span style="background-color:#f8f8f8"><span style="color:#555555"><!DOCTYPE html></span> <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>排版标签<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--注释标签：说明性内容--></span> <span style="color:#aa5500"><!--换行标签，浏览器解析网页时，忽略网页所有的换行和空格，只保留一个空格--></span> <span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> 望庐山瀑布<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> 日照香炉生紫烟<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> 遥看瀑布挂前川<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> 飞流直先三千尺<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> 疑是银河落九天<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#aa5500"><!--段落标签：用来描述一个段落内容--></span> <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>赠汪伦<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--水平线标签：线是一条横线--></span> <span style="color:#117700"><</span><span style="color:#117700">hr</span> <span style="color:#0000cc">color</span>=<span style="color:#aa1111">"red"</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"1"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"300"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">/></span> <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>李白乘舟将欲行<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>忽闻岸上踏歌声<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>桃花潭水深千尺<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>不及汪伦送我情<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>
标题标签
-
随着数字增大，文字逐渐变小，字体是加粗的，内置字号，默认占据一行
-
标签 描述 h1 1号标题，最大字号 h2 2号标题 h3 3号标题 h4 4号标题 h5 5号标题 h6 6号标题，最小字号 -
<span style="background-color:#f8f8f8"><span style="color:#555555"><!DOCTYPE html></span> <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>标题标签<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--标题标签：描述一个标题标签</span> <span style="color:#aa5500">h1是一级标题，字体最大</span> <span style="color:#aa5500">h2</span> <span style="color:#aa5500">h3</span> <span style="color:#aa5500">h4</span> <span style="color:#aa5500">h5</span> <span style="color:#aa5500">h6:六级标题，字体最小--></span> <span style="color:#117700"><</span><span style="color:#117700">h3</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>赠汪伦<span style="color:#117700"></</span><span style="color:#117700">h3</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>李白乘舟将欲行<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>忽闻岸上踏歌声<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>桃花潭水深千尺<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"center"</span><span style="color:#117700">></span>不及汪伦送我情<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>
容器标签
-
使用DIV+CSS是现在流行的一种布局方式
| 标签 | 描述 |
|---|---|
| div | 块级标签，独占一行，换行 |
| span | 行级标签，所有内容都在同一行 |
-
<span style="background-color:#f8f8f8"><span style="color:#555555"><!DOCTYPE html></span> <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>容器标签<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--容器标签：</span> <span style="color:#aa5500">div(division):分区标签，描述一个区域，属于块级标签，有高度和宽度</span> <span style="color:#aa5500">span:区域标签，属于行级标签，没有高度和宽度</span> <span style="color:#aa5500">--></span> <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"background-color: chartreuse"</span><span style="color:#117700">></span> 千锋教育----------- <span style="color:#117700"></</span><span style="color:#117700">div</span> <span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"background-color: skyblue"</span><span style="color:#117700">></span> 好程序员--------- <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"background-color: pink"</span><span style="color:#117700">></span> Java开发--------- <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">div</span> <span style="color:#0000cc">style</span>=<span style="color:#aa1111">"background-color: gold"</span><span style="color:#117700">></span> 前端开发----------- <span style="color:#117700"></</span><span style="color:#117700">div</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span>苹果<span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span>华为<span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span>小米<span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">span</span><span style="color:#117700">></span>OPPO<span style="color:#117700"></</span><span style="color:#117700">span</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>
文字标签
-
font标签处理网页中文字的显示方式
-
属性 代码 描述 size <font size="7"></font> 用于设置字体的大小，最小1号，最大7号 color <font color="#f00"></font> 用于设置字体的颜色 face <font face="宋体"></font> 用于设置字体的样式 -
<span style="background-color:#f8f8f8"><span style="color:#555555"><!DOCTYPE html></span> <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>文字标签<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--font标签：处理网页中文字的显示方式</span> <span style="color:#aa5500">属性</span> <span style="color:#aa5500">size：文字1-7（1最小）默认是：1</span> <span style="color:#aa5500">color：颜色</span> <span style="color:#aa5500">face：字体的类型--></span> <span style="color:#117700"><</span><span style="color:#117700">font</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"7"</span><span style="color:#117700">></span> 北京<span style="color:#117700"></</span><span style="color:#117700">font</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">font</span> <span style="color:#0000cc">size</span>=<span style="color:#aa1111">"1"</span><span style="color:#117700">></span>上海<span style="color:#117700"></</span><span style="color:#117700">font</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">font</span> <span style="color:#0000cc">color</span>=<span style="color:#aa1111">"#87ceeb"</span> <span style="color:#0000cc">face</span>=<span style="color:#aa1111">"隶书"</span><span style="color:#117700">></span>杭州<span style="color:#117700"></</span><span style="color:#117700">font</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>
文本格式化标签
-
格式化标签实现内容的简单样式处理
-
标签 描述 b 粗体标签 strong 粗体标签 em 强调字体 sub 下标标签 sup 上标标签 del 删除线 -
<span style="background-color:#f8f8f8"><span style="color:#555555"><!DOCTYPE html></span> <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>文本格式化标签.<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--加粗显示--></span> <span style="color:#117700"><</span><span style="color:#117700">b</span><span style="color:#117700">></span>小莲花<span style="color:#117700"></</span><span style="color:#117700">b</span><span style="color:#117700">><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#117700"><</span><span style="color:#117700">strong</span><span style="color:#117700">></span>小翠<span style="color:#117700"></</span><span style="color:#117700">strong</span><span style="color:#117700">><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#aa5500"><!--斜体显示--></span> <span style="color:#117700"><</span><span style="color:#117700">em</span><span style="color:#117700">></span>大雄<span style="color:#117700"></</span><span style="color:#117700">em</span><span style="color:#117700">><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#117700"><</span><span style="color:#117700">i</span><span style="color:#117700">></span>哆啦A梦<span style="color:#117700"></</span><span style="color:#117700">i</span><span style="color:#117700">><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#aa5500"><!--上标--></span> 10<span style="color:#117700"><</span><span style="color:#117700">sup</span><span style="color:#117700">></span>2<span style="color:#117700"></</span><span style="color:#117700">sup</span><span style="color:#117700">><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#aa5500"><!--下标--></span> log<span style="color:#117700"><</span><span style="color:#117700">sub</span><span style="color:#117700">></span>10<span style="color:#117700"></</span><span style="color:#117700">sub</span><span style="color:#117700">><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#aa5500"><!--删除线--></span> 原价：<span style="color:#117700"><</span><span style="color:#117700">del</span><span style="color:#117700">></span>10000<span style="color:#117700"></</span><span style="color:#117700">del</span><span style="color:#117700">></span>；现价：99<span style="color:#117700"><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>
列表标签
无序标签
-
无序列表：使用一组无序的符号定义，标签为<ul></ul>
-
属性值 描述 用法举例 circle 空心圆 <ul type = "circle"></ul> disc 实心圆 <ul type = "disc"></ul> square 黑色方块 <ul type = "square"></ul>
有序标签
-
有序列表：使用一组有序的符号定义，标签为<ol></ol>
-
属性值 描述 用法举例 1 数字类型 <ol type="1"></ol> A 大写字母 <ol type="A"></ol> a 小写字母 <ol type="a"></ol> i 小写罗马 <ol type="i"></ol> I 大写罗马 <ol type="I"></ol> -
<span style="background-color:#f8f8f8"><span style="color:#555555"><!DOCTYPE html></span> <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>列表标签<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--无序列表：列出一系列条目 块级标签</span> <span style="color:#aa5500">ul：无序列表标签（Unorder List） 块级标签</span> <span style="color:#aa5500">属性：</span> <span style="color:#aa5500">type：表示项目列表符号(默认：disc)</span> <span style="color:#aa5500">circle:空心圆</span> <span style="color:#aa5500">disc:实心圆</span> <span style="color:#aa5500">square:方块</span> <span style="color:#aa5500">li:列表项(List)--></span> <span style="color:#117700"><</span><span style="color:#117700">ul</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"circle"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>北京<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>上海<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>深圳<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>杭州<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--快速输入无序列表 ul>li*4+tab--></span> <span style="color:#aa5500"><!--有序列表</span> <span style="color:#aa5500">ol:有序列表标签(Order List)块级标签</span> <span style="color:#aa5500">type：表示项目列表符号（默认：1）</span> <span style="color:#aa5500">1:表示数字</span> <span style="color:#aa5500">i:小写罗马数字</span> <span style="color:#aa5500">I:大写罗马数字</span> <span style="color:#aa5500">a:小写字母</span> <span style="color:#aa5500">A:大写字母</span> <span style="color:#aa5500">li 列表项--></span> <span style="color:#117700"><</span><span style="color:#117700">ol</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"I"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>华为<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>小米<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>苹果<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">ol</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">hr</span><span style="color:#117700">/></span> <span style="color:#aa5500"><!--列表嵌套--></span> <span style="color:#117700"><</span><span style="color:#117700">ol</span> <span style="color:#0000cc">type</span>=<span style="color:#aa1111">"a"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>茶叶<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">ul</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>茉莉花茶<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>红茶<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>水果<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">ul</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>苹果<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>香蕉<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">ol</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>
图片标签
-
在页面指定位置处中引入一副图片，标记为<img />
-
属性名 描述 src 引入图片的地址 width 图片的宽度 height 图片的高度 align 对齐显示方式 alt 替换信息，当图片不显示时 title 鼠标悬停显示内容 hspace 在图片左右设定空白 vspace 在图片上下设定空白 -
<span style="background-color:#f8f8f8"><span style="color:#555555"><!DOCTYPE html></span> <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>图片标签<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--img：图片标签</span> <span style="color:#aa5500">常用属性</span> <span style="color:#aa5500">src:图片路径，绝对路径，相对路径</span> <span style="color:#aa5500">绝对路径：带有http协议的完整路径。不同网站之间使用绝对路径</span> <span style="color:#aa5500">相对路径：以当前文件的位置为参照，关联文件的位置。同一个网站之间使用相对路径</span> <span style="color:#aa5500">width：图片的宽度</span> <span style="color:#aa5500">height：图片的高度</span> <span style="color:#aa5500">alt：图片的替换内容 图片加载失败显示的内容（网络中断、地址错误）</span> <span style="color:#aa5500">title：图片的悬停内容 鼠标放在上面显示的内容</span> <span style="color:#aa5500">align：图片的对齐方式(bottom/baseline:基线对齐 middle：居中对齐 top：顶部对齐)--></span> <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"images/cehsi.jpg"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"340"</span> <span style="color:#0000cc">height</span>=<span style="color:#aa1111">"192"</span> <span style="color:#0000cc">align</span>=<span style="color:#aa1111">"top"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">"图片"</span> <span style="color:#0000cc">title</span>=<span style="color:#aa1111">"这是一张图片"</span><span style="color:#117700">></span> 这是一个可爱的女孩 <span style="color:#117700"><</span><span style="color:#117700">img</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"images/ceshi2.jpg"</span> <span style="color:#0000cc">width</span>=<span style="color:#aa1111">"340"</span> <span style="color:#0000cc">height</span>=<span style="color:#aa1111">"192"</span> <span style="color:#0000cc">alt</span>=<span style="color:#aa1111">"图片"</span> <span style="color:#0000cc">title</span>=<span style="color:#aa1111">"这是一个女孩"</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span> </span>
链接标签
-
链接标签为<a>文本或内容</ a>
-
在页面中使用链接标签跳转到另一页面
-
指向同一页面中指定位置
-
定义位置 <a name = "名称" ></ a>
-
指向 ： <a href = "#名称"> </ a>>
-
-
<span style="background-color:#f8f8f8"><span style="color:#555555"><!DOCTYPE html></span> <span style="color:#117700"><</span><span style="color:#117700">html</span> <span style="color:#0000cc">lang</span>=<span style="color:#aa1111">"en"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"UTF-8"</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>超链接标签<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">name</span>=<span style="color:#aa1111">"mytop"</span><span style="color:#117700">></</span><span style="color:#117700">a</span><span style="color:#117700">></span> <span style="color:#aa5500"><!--a:超链接标签--></span> <span style="color:#117700"><</span><span style="color:#117700">h1</span><span style="color:#117700">></span>a:超链接标签<span style="color:#117700"></</span><span style="color:#117700">h1</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">h2</span><span style="color:#117700">></span>常用属性<span style="color:#117700"></</span><span style="color:#117700">h2</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">ul</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>href:超链接地址<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>target：打开目标地址的方方式<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">ol</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>_blank:在新窗口中打开<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>_self：在自身窗口打开(默认值)<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>_parent：在父窗口打开<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>_top：在顶部窗口打开<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>自定义名字：在新窗口打开，并且只打开一个<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">ol</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">h2</span><span style="color:#117700">></span>作用1：实现页面之间的跳转<span style="color:#117700"></</span><span style="color:#117700">h2</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"http://www.baidu.com"</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span><span style="color:#117700">></span>百度<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"http://www.163.com"</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"小莲花"</span><span style="color:#117700">></span>网易<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"01结构标签.html"</span><span style="color:#117700">></span>ceshi<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#117700"><</span><span style="color:#117700">h2</span><span style="color:#117700">></span>作用2：实现锚连接<span style="color:#117700"></</span><span style="color:#117700">h2</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>网页内容<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>网页内容<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>网页内容<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>网页内容<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>网页内容<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>网页内容<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span> <span style="color:#0000cc">id</span>=<span style="color:#aa1111">"middle"</span><span style="color:#117700">></span>中间定位<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>网页内容<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>网页内容<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>网页内容<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>网页内容<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">p</span><span style="color:#117700">></span>网页内容<span style="color:#117700"></</span><span style="color:#117700">p</span><span style="color:#117700">></span> <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"#mytop"</span><span style="color:#117700">></span>回到顶部<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">><</span><span style="color:#117700">br</span><span style="color:#117700">/></span> <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"#middle"</span><span style="color:#117700">></span>回到中间<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span> <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>
表单标签
-
表格标签用来在页面中规则整齐显示数据
-
标签：
-
table：定义一个表格
-
tr：定义行
-
td：定义列
-
th：定义列标题加粗居中显示
-
-
表单常用属性
-
属性名 代码 描述 border <table border ="1"></table> 设置表格边框 width，height <table width ="300" height="200"></table> 设置表格的宽度或高度 align,valign <tr align="center" valign="middle"> 设置单元格的水平或垂直对齐 bgcolor <table bgcolor="skyblue"> 设置表单的背景颜色
-
-
颜色表示方式‘
-
使用表示颜色的英文单词，比如：red,green,blue
-
使用16进制RGB模式表示颜色，比如：#000000（黑色），#FFFFFF（baise）
-
-
列合并，行合并
-
列合并：colspan
-
行合并：rowspan
-
8874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
