让你快速理解）"/>
html是什么？（一句话让你快速理解）
8.7.5html
-
1.html 超文本标记语言
-
2.<!DOCTYPE html> html文档版本声明-> html5的声明方式 必须存在与html页面的首行
-
3.head中定义的内容是给浏览器识别的一些设置
body中的内容给用户看的,显示在页面中的
4.<meta charset="utf-8"> 解码格式 告诉浏览器使用哪一种字符编码格式解析html页面中的内容 编码与解码保持一致不会出现乱码
5.title标签 是head中唯一一个能被用户看到内容的标签对 html文档的标题 有利于搜索引擎的优化 在收藏页面的时候,标签名默认title标签对中的内容 6.分类: 双标签|闭合标签 : 标签对中需要定义内容 单标签|自闭和标签 : 标签对中不需要定义内容 7.属性: 帮助更完整的展示标签 属性名 = "属性值" 可以为一对'',可以为一对"" 属性要存在空格
8.元素: 标签+内容
8.7.6html常用标签
-
1.a 超链接标签 属性: href : 链接地址 必填属性 相对地址 绝对地址
# 回到顶部但不刷新
title : 当鼠标悬停在内容上时候显示的 提示字 target : 打开方式 _self : 本页面打开 -> 默认 _blank : 新页面打开 样式: 下划线 字体颜色: 连接未访问: 蓝色 连接已访问: 紫色
-
2.img 图像标签 属性: src : 图片地址 -> 必填属性 相对地址 绝对地址 alt : 当图像无法正确加载,显示提示 title : 当鼠标悬停在内容上时候显示的提示字 width : 宽度 单位: 大小长度等单位为px 高度没有设置会等比进行缩放,保证图像不失真 height : 高度 border : 设置边框大小 路径指定: 进入某个路径下 文件夹名字/ 回到上一层路径 ../
-
3.h* 标题标签 h1~h6 根据权重的不同,大小会一次缩小 样式: 字体大小不同 加粗 独占一行,前后换行
-
4.p标签 段落标签 前后换行 语义化 正常显示
<a href="" title="挑战极限" target="_blank">优极限学堂</a><a href="html01入门.html">html入门</a><a href="#">嘻嘻哈哈</a><hr> <!-- 水平线--><img src=".png" alt="网络连接失败..."><img src="img/nvxinlishi.jpg" alt="" title="主演: 杨紫" width="500px" height="400px" border="5px"><hr><h1>我是标题标签1</h1><h3>我是标题标签3</h3><h6>我是标题标签6</h6><hr>p标签之前<p>我是一个p标签</p>p标签之后</body> </html>
8.7.7html标签的分类
-
标签的分类 行内元素 : 可以与其他行内元素或者文本同行显示 行内元素不可以设置宽高 宽高有内容撑起 行内元素可以嵌套其他行内元素或者普通文本 不能设置上下的内外边距
-
块元素 : 独占一行,前后换行 可以设置宽高 可以嵌套块元素,行内元素,普通文本 可以设置上下左右内外边距
-
5.span 帮助方便的展示元素 行内元素 正常显示
-
6.div 块 div+css 实现布局 块元素
-
7.hr 水平线 8.br 换行 注意: p只能嵌套其他行内与文本
<p>块元素</p><a href="#">行内元素</a><hr><p>我是<span>粉</span>刷匠,<span>粉</span>刷本领强,<br>我要把那新房子,刷得更漂亮</p><hr><div>我是一个div</div></body> </html>
8.7.8html列表
-
列表 无序列表 ul标签 有序列表 ol标签
-
li 列表项 列表项标记修改 : 在ul|ol标签上使用type属性修改 无序列表的列表项标记 : type : circle空心圆圈 desc实心圆形 square黑心方块 有序列表的列表项标记 : type : 1 A a I i
-
ul,ol,li都是块元素,独占一行 ul,ol中的直接子元素只能为li,li中可以嵌套任意内容 各种列表都可以任意实现嵌套 list-style: none; 去除列表项标记
<h3>我不爱吃的食物</h3><ul type="square" style="list-style: none;"><li>香菜</li><li>折耳根</li><li>蒜</li></ul><h3>我爱吃的食物</h3><ol type="I"><li>醋</li><li>车厘子</li><li>草莓</li><li>榴莲</li><li>臭豆腐</li><li><h4>火锅蘸料</h4><ul><li>麻酱花生碎</li><li>腐乳</li><li>韭菜花</li><li>油碟,香菜</li></ul></li></ol></body> </html>
8.7.9html表格
-
表格 : * table 表格标签 tr 行 th 表格头单元格 默认加粗居中 td 表格体单元格 内容定义在单元格中 单元格要定义在行中 先有行,再有单元格,再有内容 单元格中可以定义任意内容
-
属性: border="1" 边框 align 对齐方式 left 左对齐 right 右对齐 center 居中对齐 width : 宽度 height : 高度 style="border-collapse: collapse;" 双线变单线 合并单元格: * rowspan 跨行 colspan 跨列
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>表格</title></head><body><!-- 表格 : *****table 表格标签tr 行th 表格头单元格 默认加粗居中td 表格体单元格内容定义在单元格中单元格要定义在行中先有行,再有单元格,再有内容单元格中可以定义任意内容属性:border="1" 边框align 对齐方式left 左对齐right 右对齐center 居中对齐width : 宽度height : 高度style="border-collapse: collapse;" 双线变单线合并单元格: *****rowspan 跨行colspan 跨列--><table border="1" align="center" width="500px" height="400px" bordercolor="hotpinl" bgcolor="lightcyan" style="border-collapse: collapse;"><tr><th colspan="6">课程表</th></tr><tr bgcolor="cyan"><th></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr align="center"><td rowspan="4">上午</td><td>数学课</td><td>数学课</td><td>数学课</td><td>语文课</td><td>语文课</td></tr><tr align="center"><td>英语课</td><td>英语课</td><td>物理课</td><td>物理课</td><td>物理课</td></tr><tr align="center"><td>政治课</td><td>政治课</td><td>历史课</td><td>历史课</td><td>历史课</td></tr><tr align="center"><td>地理课</td><td>地理课</td><td>地理课</td><td>生物课</td><td>生物课</td></tr><tr align="center"><td rowspan="2">下午</td><td>化学课</td><td>化学课</td><td>化学课</td><td>体育课</td><td>体育课</td></tr><tr align="center"><td>自由课</td><td>自由课</td><td>美术课</td><td>美术课</td><td>美术课</td></tr></table></body> </html>
更多推荐
html是什么？（一句话让你快速理解）
发布评论