简单把握
1.标签的格式:
<标签名>封装的数据</标签名>
2.标签名大小写不敏感。
3.标签拥有自己的属性。
i. 分为基本属性:bgcolor="red" 可以修改简单的样式效果
ii. 事件属性: οnclick="alert('你好!');" 可以直接设置事件响应后的代码。
4.标签又分为,单标签和双标签。
i. 单标签格式: <标签名 /> br 换行 hr 水平线
ii. 双标签格式: <标签名> ...封装的数据...</标签名>
标签的语法: <!-- ①标签不能交叉嵌套 --> 正确:<div><span>早安,尚硅谷</span></div> 错误:<div><span>早安,尚硅谷</div></span> <hr /> <!-- ②标签必须正确关闭 --> <!-- i.有文本内容的标签: --> 正确:<div>早安,尚硅谷</div> 错误:<div>早安,尚硅谷 <hr /> <!-- ii.没有文本内容的标签: --> 正确:<br /> 错误:<br> <hr /> <!-- ③属性必须有值,属性值必须加引号 --> 正确:<font color="blue">早安,尚硅谷</font> 错误:<font color=blue>早安,尚硅谷</font> 错误:<font color>早安,尚硅谷</font> <hr /> <!-- ④注释不能嵌套 --> 正确:<!-- 注释内容 --> <br/> 错误:<!-- <!-- 这是错误的 html 注释 --> --> <hr /> 注意事项: 1.html 代码不是很严谨。有时候标签不闭合,也不会报错
常用标签介绍
font 字体标签
需求 1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。
<body> <!-- 字体标签 需求 1:在网页上显示 我是字体标签 ,并修改字体为 宋体,颜色为红色。 font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸) color 属性修改颜色 face 属性修改字体 size 属性修改文本大小 --> <font color="red" face="宋体" size="7">我是字体标签</font> </body>
特殊字符
需求 1:把换行标签 变成文本 转换成字符显示在页面上 常用特殊字符表:
其他特殊字符表:
<body> <!-- 特殊字符 需求 1:把 <br> 换行标签 变成文本 转换成字符显示在页面上 常用的特殊字符: < ===>>>> < > ===>>>> > 空格 ===>>>> --> 我是<br>标签<br/> 国哥好 其他特殊字符表: 帅啊! </body>
标题标签
标题标签是 h1 到 h6
需求 1:演示标题 1 到 标题 6 的
<body> <!-- 标题标签 需求 1:演示标题 1 到 标题 6 的 h1 - h6 都是标题标签 h1 最大 h6 最小 align 属性是对齐属性 left 左对齐(默认) center 剧中 right 右对齐 --> <h1 align="left">标题 1</h1> <h2 align="center">标题 2</h2> <h3 align="right">标题 3</h3> <h4>标题 4</h4> <h5>标题 5</h5> <h6>标题 6</h6> <h7>标题 7</h7> </body>
超链接 ( **** 重 点 ,必 须 掌 握 * )
在网页中所有点击之后可以跳转的内容都是超连接
需求 1:普通的 超连接。
<body> <!-- a 标签是 超链接 href 属性设置连接的地址 target 属性设置哪个目标进行跳转 _self 表示当前页面(默认值) _blank 表示打开新页面来进行跳转 --> <a href="http://localhost:8080">百度</a><br/> <a href="http://localhost:8080" target="_self">百度_self</a><br/> <a href="http://localhost:8080" target="_blank">百度_blank</a><br/> </body>
列表标签
无序列表 、 有序列表
需求 1:使用无序,列表方式,把东北 F4,赵四,刘能,小沈阳,宋小宝,展示出来
<body> <!--需求 1:使用无序,列表方式,把东北 F4,赵四,刘能,小沈阳,宋小宝,展示出来 ul 是无序列表 type 属性可以修改列表项前面的符号 li 是列表项 --> <ul type="none"> <li>赵四</li> <li>刘能</li> <li>小沈阳</li> <li>宋小宝</li> </ul> </body>