html5 (一)之基本标签、超链接及表格
块级元素:类似于段落标签、div,独占一行自动换行,什么都可以写
行级元素:类似于 input ,不能写块级元素
特殊规则:h1-h6不能嵌套,p标签里面不能写块元素
HTML5的基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
- 第一种(语言-国家/地区)
- zh-CN
- en-US
- 第二种(语言-具体种类)
- zh-Hans:中文-简体
- zh-Hant:中文-繁体
DOCTYPE声明
DOCTYPE是document type的缩写,避免浏览器的怪异模式
head 元素
head标签用于定于文档的头部,定义了文档的各种属性和信息,包括标题,web中的位置以及和其他文档的关系
body 元素
body与head同级下,用于定义主体,包含文档的所有内容,会直接在页面上显示出来
title 元素
- 定义文档的标题
- 显示在浏览器的标题栏和状态栏上
- 写 head 一定要写 title
- title 的增加有利于SEO的优化
ps:SEO是搜索引擎优化,通过对网站内容调整,满足搜索引擎的排名需求
meta 元素
meta 是一个单标签,用来描述HTML网页的属性,关键词,例如:<meta charset="UTF-8">
标题
<h1> </h1>
来进行定义标题,最高到<h6>
,快捷键 h$*6
align 标题标签的位置摆放
align="left | right | center"
左侧|右侧|中间
段落标签
<p> </p>
换行单标签
<br>
水平分割线标签
<hr color="" width="" size="" ailgn=""/>
- color:颜色
- width:宽度,例如 300px
- size:高度
- ailgn:对齐方式,默认center
按照原文显示
<pre>
双标签
文本标签(双标签)
标签 | 描述 |
---|---|
em | 定义着重阅读文字,斜体效果 |
b | 定义粗体文字 |
span | 定义没有特定含义 |
i | 定义斜体文字 |
strong | 定义加重语气 |
del | 定义删除字 |
文本标签一般标注词汇,记得带<>
img 图片单标签
<img src="" alt="" title="" width="" height="">
- src:webp格式的图片路径名字
- alt:规定图像替代的文本
- width:规定图像宽度
- height:规定高度(一般不规定)
- title:鼠标停在图片上给予提示
ps:
- jpg:不支持透明背景图片,占用空间小
- png:无损,支持颜色丰富,透明背景
- bmp:不压缩,占用空间大,不支持透明背景
- gif:简单透明背景 + 简单透明背景
- webp:兼容性不好(去判断)
- base64:使用转码,适用于小的图片和需要网页一起加载的图片(无需发送请求,直接编译)
超文本链接
三种默认样式
- 一个未访问的链接显示蓝色且带有下划线
- 访问过的链接为紫色且有下划线
- 点击链接时显示红色带下划线
ps:
- 链接文本可以是任意内容(图也可以),不允许 a 标签嵌套
- 在当前页签打开(默认)文本`
- 在另一个页签打开:
<a href="url" target="_blank">文本</a>
- 浏览器可以打开,但会触发下载使用 download 属性
<a href="url" download=“命名”>文本</a>
跳转锚点
一下有两种写法:
1)使用 a 标签 name 属性,注意 name 区分大小写
<a href="#hello">快速跳转</a>
<a name"hello"></a>
`<img src="" alt="">
2)使用 p 标签 id 属性(一般使用这个),id 最好不要用数字
<a href="#atm">快速跳转</a>
<p id="atm">文本</p>
`<img src="" alt="">
回到顶部:<a href="#">回到顶部</a>
刷新页面:<a href="">刷新页面</a>
可以与JS脚本互动:<a href="javascripts:alert(666);">点我弹窗</a>
超链接唤醒指定应用
- 唤起设备拨号:
<a href="tel:10010">电话联系</a>
- 唤起设备发送邮件:
<a href="mailto:111111@xxx.com">邮件联系</a>
- 唤起设备发送短信:
<a href="sms:10010">短信联系</a>
列表标签(双标签)
有序列表 (Ordered list)
有序列表始于
- ,每个列表项始于
- (列表项:list items)
<ol> <li> <li> </ol>
ol 的 type 属性:
<ol type="1"></ol> <ol type="a"></ol> <ol type="A"></ol> <ol type="i"></ol> <ol type="I></ol>
ps: 连接最好用 li 标签去嵌套 a 标签
- 列表嵌套:
<ol> <li> <span>你喜欢</span> <ul> <li>你猜猜<li> </ul> <li> </ol>
无序列表(unordered list)
<ul> <li> </li> </ul>
自定义列表(definition list)
整体 dd 标签 里面可以嵌套列表
<dt>
术语的标题,<dd>
术语的名称<dl> <dt> </dt> <dd> </dd> </dl>
表格(双标签)
表格:
<table>
行:<tr>
表格标题:<caption>
,单元格:<th>
表格头部:<thead>
表格主体:<tbody>
,单元格:<td>
表格脚注:<tfoot>
,单元格:<td>
常用属性:
<table>
<table border="1" width="" height="" cellspacing="0">
- =当值大于 1 ,调整整体的边框,并没有控制单元格的
- height:表格标题和脚注一直不会被更改
- cellspacing:调整单元格间的缝隙,无法让单元格之间重合
注意这里的值均为最少为多少
<thead>
<thead height="" align="" valign="">
valign:垂直方向(可选值:top,bottom,middle)
align: 水平方向<tbody height="" align="" valign="">
<th>
<th height="" align="" valign="" colspan="">
- colspan:跨列,单位是列,值是跨越列数
<td>
<td height="" align="" valign="" rowspan="">
- rowspan:跨行,值是跨越行数