-
文本格式化标签
加粗
<b>需加粗的文字</b>、<strong>需加粗的文字</strong>
斜体
<i>要变斜体的文字</i>、<em>要变斜体的文字</em>
下划线
<u>要加下划线的文字</u>、<ins>要加下划线的文字</ins>
删除线
<s>要划删除线的文字</s>、<del>要划删除线的文字</del>
-
列表标签
(默认带一实心点)无序列表:<ul></ul>
(默认1234)有序列表:<ol></ol>
<li></li>表示行内容,必须放在<ul>对里面或者<ol>对里面使用
<li>可以有子标签,<ul>的子标签只能是<li>
<ul>
<li>1111</li>
<li>2222</li>
<li>6666</li>
</ul>
<ol>
<li>what</li>
<li>are</li>
<li>u</li>
</ol>
修改<ul>和<ol>标签的type属性的值,可以改变列表前面的符号
type属性值 | ul | ol |
---|---|---|
不知道怎么搞 | 默认disc 实心圆 | 默认1 数字 |
circle 空心圆 | a 小写字母 | |
square 实心方块 | A 大写字母 | |
无 | i 小写i字母 | |
无 | I 大写I字母 |
-
表格标签
<table></table>作为表格的根元素,行的内容、列的内容都涵括其中
<tr></tr>即table row,表示行元素
<td></td>即table data,表示列元素
<th></th>表示列标题
每一行会有多个列,所以每一对<tr></tr>中会有多个<td></td>对,第一次的<tr></tr>对中会出现多个<th></th>对
设置表格边框,在<table>开始标签里设置border属性,令border="边框宽度数字",即可设置边框的宽度
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>just a title</title>
</head>
h1>一级标题在此</h1>
<h2>二级标题在此</h2>
<h3>三级标题在此</h3>
h1到h6有六级标题
<h6>...</h6>
<hr/>
<hr>
<hr />
<p>你是<br/>哪位</p>
<p>
<b>heyyyy</b>
<br>
<strong>love uuuuuu</strong>
<br>
<i>NewJeans Never Die</i>
<br>
<em>ditto is true music</em>
<u>supernatural</u>
<br>
<ins>i am not gonna be the one to get hurt</ins>
</p>
<p>
<s>test</s>
<del>lesson</del>
</p>
<table border="1">
<tr>
<th>It's</th>
<th>true</th>
<th>music</th>
</tr>
<tr>
<td>attention</td>
<td>hype boy</td>
<td>hurt</td>
</tr>
<tr>
<td>OMG</td>
<td>ditto</td>
<td>cool with you</td>
</tr>
</table>
</body
</html>
-
属性
属性用于定义元素的行为和外观,以及与其他元素的关系
属性的基本语法是在开始标签中写上属性名="属性值",即<开始标签 属性名="属性值">
如上图中的border属性
每个HTML元素可以有多个不同的属性
属性名不区分大小写,属性值区分
<img src="example.jpg" alt="">
<img SRC="example.jpg" alt="">
<img src="EXAMPLE.JPG" alt="">
第一行代码和第二行代码的运行效果相同,第三个和前两个则不相同
-
适用于大部分HTML元素的属性
属性名 | 描述 |
---|---|
class | 为HTML元素定义一个或多个类名 |
id | 定义元素唯一的id |
style | 规定元素的行内样式 |
-
特殊的属性
<a>标签,定义超链接,用于从一个页面跳转到另一个页面
<a>标签有两个属性,一个是href属性,用于存放目标链接,一个是target属性,定义了目标网页的打开
href属性
href属性值 | 外部网页链接,必须加上http://,如<a href="http://www.123.com">显示的文字内容</a> |
同一网站内网页链接,<a href="123.html">显示的文字内容</a> | |
空链接,<a href="#">显示的文字内容</a> | |
下载链接,点击后会进行下载,<a href="123.zip">文字</a> | |
锚点链接,点击后定位到当页面的某个位置,令目标元素设定id值,<a href="#目标元素的id值"></a> | |
网页元素链接,对图片、音频、表格等元素添加超链接 |
锚点链接代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML链接知识讲解">
<meta name="keywords" content="HTML,Link">
<title>Document</title>
</head>
<body>
<h1>HTML入门</h1>
<h2>目录</h2>
<ul>
<li><a href="#toc1">简介</a></li>
</ul>
<h2 id="toc1">简介</h2>
<p>
<a href="#">回到顶部</a>
</p>
</body>
</html>
target属性
_self | 链接将会在当前窗口打开 |
_blank(默认) | 链接将会在新窗口打开 |
_parent | 链接将会在母窗口打开,若无母窗口则同_self |
_top | 链接将会在顶层窗口打开,若无顶层窗口则同_self |
<img>标签,用于在网页中呈现图片
<img>的src属性,用于存放图片路径,alt属性用于存放当图片无法显示时呈现出的文字内容,width属性更改图片的宽度,height属性更改图片的高度
<img src="路径" alt="文字" width="数字" height="数字">