今日内容概要
- HTML简介
- head内常见标签
- body内基本标签
- 特殊符号
- 常见标签
- 标签两大重要属性
- 列表标签
- 表格标签
HTML简介
HTML是构建网页的骨架，几乎所有的网站都是HTML构建
HTML超文本标记语言
HTML标签分类：1.双标签
<a></a>
2.自闭和标签(单标签)
<img/>
HTML文档结构
<html>
<head>编写给浏览器查看的内容</head>
<body>编写给用户查看的内容</body>
</html>
HTML语法注释
<!--单行注释-->
<!--
多行注释
-->
注释快捷键ctrl+?
head内常见标签
title 定义网页标题
style 内部支持css代码
script 内部支持js代码，还可以通过src属性导入外部js文件
link 通过href属性导入外部css文件
meta 定义网页源信息
keywords 关键字搜索
description 网页描述信息
body内基本标签
h1~h6 标题标签
p 段落标签
b 加粗
i 斜体
u 下划线
s 删除线
br 换行
hr 水平分割线
标签分类
1.单双标签
2.块级标签(h1~h6,p)
独占一行
3.行内标签(u,i,s,b)
自身文本多大就占多大
特殊符号
空格
> 大于号
< 小于号
& &符号
¥ 羊角符
© 版权符
® 注册
常见标签
布局标签：div 块级标签
span 行内标签
'''
标签是可以嵌套的，需要遵循以下规则
块级标签可以无限制嵌套块级标签和行内标签
特例：p标签虽然是快级标签，但是不能嵌套块级标签
行内标签不能嵌套块级标签，可以嵌套行内标签
'''
1.a标签：连接标签
方法一：通过href属性指定网址(URL)点击跳转
当前页面跳转 target="_self" 默认
新建页面跳转 target="_blank"
方法二：锚点功能
通过href属性指定标签的id值点击跳转到对应位置
2.img标签：图片标签
src属性指定图片地址
本地地址和网络地址
alt属性编写文本
用于图片无法加载情况下的提示信息
title属性写文本
用于鼠标悬浮在图片上提示的文本信息
height,width属性写像素
用于调整图片尺寸
调整的时候修改一个图片另一个等比例缩放
同时调整多个图片可能会造成图片失真
标签两大重要属性
1.id属性(个体查找)
相当于标签生份证号，在同一个html页面上id不能重复
2.class属性(群体查找)
相当于python中面向对象类的继承，可以将多个标签分为一类
<h1 class='c1'></h1>
<p class='c1'></p>
一个标签可以有多个类
<h1 class='c1 c2 c3'></h1>
<p class='c4 c5 c6'></p>
列表标签
1.无序列表
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
2.有序列表
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
3.标题列表
<dl>
<dt>111</dt>
<dd>222</dd>
<dt>333</dt>
<dd>444</dd>
</dl>
表格标签
需要展示一些具体固定格式的多余数据时可以考虑使用
表格标签格式
<table>
<thead></thead> 表头
<tbody></tbody> 表单
</table>
tr标签：表示一行
th标签：表头字段名称
td标签：普通单元格数据
<table border="1" cellpadding="3" cellspacing="1">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>sss</td>
<td>18</td>
<td>music</td>
</tr>
<tr>
<td>lll</td>
<td>18</td>
<td>run</td>
</tr>
</tbody>
</table>
border: 表格边框
cellpadding: 内边距
cellspacing: 外边距
width: 像素 百分比（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（合并单元格）
