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="http://yjxxt.com" title="挑战极限" target="_blank">优极限学堂</a>
<a href="html01入门.html">html入门</a>
<a href="#">嘻嘻哈哈</a>
<hr> <!-- 水平线-->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf1.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>
8076
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
