HTML常用标签
文本标签
- 超链接
<a href="www.baidu.com">点击进入百度</a>
路径两种，一种是绝对路径另外一种是相对路径，相对路径是指相对于包含这个标签的html文件的路径。这里不再过多赘述，不懂得可以自行百度。
- 外部链接：访问页面外的元素，就像上面的一样
- 内部链接（锚点）：也可以访问页面内的，就好像我们平时在word或者PFD中使用的标签那样，点击一下可以直接跳转到对应的页面内的地方。下面看代码示例如下
<!--文件内的链接>
<!---->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<h1>标题一</h1>
<a href="#title2">点击跳转到标题二</a>
<p>内容一</p>
<p>内容一</p>
<h2 id="title2">标题二</h2>
<p>内容二</p>
<p>内容二</p>
</html>
自己可以把中间的内容填充的多一点，自己试试
下面介绍他的第二个属性，打开的超链接实在当前窗口打开还是在新开的窗口打开，意思就是，比如我们在百度搜素爱奇艺，点进去爱奇艺官网的时候，那么百度搜索结果展示的那一栏并不会关闭，打开的爱奇艺实在新的标签页的，当然，至于是 在新的标签页打开还是在本来的标签页打开，都是可以由开发人员去设定的。目前国内的的网站总是在新的窗口打开标签页，二国外的一般都是不会再去开一个新的标签页，使用百度和谷歌的时候可以明显看到不同。
<a href="www.baidu.com" target="_blank">点击跳转到百度</a>
<a href="www.baidu.com" target="_parent">点击跳转到百度</a>
<a href="www.baidu.com" target="_self">点击跳转到百度</a>
<a href="www.baidu.com" target="_top">点击跳转到百度</a>
target的默认值是"_self",也就是当前窗口打开。具体的其他几个值，自己去实验一下，这里不再过多赘述。
- 引用
-
长引用
-
短引用
-
引用来源（书、影视、页面）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引用</title>
</head>
<body>
<blockquote cite="https://live.bytedance.com/1442/8247082">
<p>这是字节跳动的前端视频教程</p>
<cite>来自字节跳动</cite>
</blockquote>
<p><cite>维基百科</cite><p>上说JAVA</p></p>
</body>
</html>
- 强调
- em标签：强调重读
- strong标签：强调重要性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>强调</title>
</head>
<body>
<p>猫是可爱的动物</p>
<p>猫<em>是</em>可爱的动物</p>
<p>猫是<em>可爱</em>的动物</p>
<p>
用法和用量：每日三片，每次一片，饭后服用
<strong>警告：孕妇和儿童请遵医嘱</strong>
</p>
</body>
</html>
实际效果是标签是字体变成斜体，变成粗体
- 代码
-
代码片段
-
变量名
-
输出示例
-
键盘操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>代码</title> </head> <boay> <p><code>printf("Hello World\n"")</code></p> <p><var>int a;</var></p> <p><samp>输出示例</samp></p> <p><kbd>Ctrl+Shift</kbd></p> </boay> </html>
- 空白字符
html语言并不像我们想的那样，他是会忽略代码里面的空白字符，例如下面一段代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>空白字符</title>
</head>
<body>
<p>Hello World!</p>
<p>你好
世界</p>
</body>
</html>
实际的输出结果是Hello和World之间只会有一个空格，而不是像源代码那样的有好多个空格。下面的你好世界之间也不会有那么多的换行和空格。这是因为HTML会把空格和换行识别为空白字符，并且会合并多个空白字符。但如果我们想要让他显示很多个空格字符或者换行呢？
- 使用pre标签：会保留源代码中的空格和换行
- 使用实体字符：
  空格
< <
> >
& &
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y6yU58Fx-1623562107802)(C:\Users\mixinju\AppData\Roaming\Typora\typora-user-images\image-20210607222127480.png)]
多媒体标签
- 图片
使用img标签，代码如下：
<img src="图片路径" alt="无法加载图片" />
其中alt属性是指当图片加载失败的时候显示的文字，而且是一个必要的属性。除了alt属性，img标签还有可以调整图片大小的属性width和height，如果不指定，图片会以默认的大小展示，如果只指定一个，那么另一个会随着指定的那个根据图片比例自动调整。
这里再补充说明一下，目前Web使用的图片格式一般有jgp、png、webp、gif等
- 视频
使用video标签
<p>
<video src="https://home.miui.com/videos/out_540p.mp4"
controls
autoplay
muted
loop
poster="https://home.miui.com/_next/image?url=https%3A%2F%2Fcdn.cnbj1.fds.api.mi-img.com%2Fmiui12-half%2Fassets%2Flightcone-arch-m.jpg&w=1024&q=75"
width="1000"
height="500"
preload>
<track kind="subtitles" srclang="ch" src="字幕文件路径">
</video>
</p>
control展示是否显示浏览器的播放控制界面，autoplay设置是否自动播放，muted设置视频静音的属性，loop设置循环播放。是照片一样，也可以为视频设置大小，他的高度和宽度。使用方法和图片的一样，preload设置视频是否提前加载。如过要添加字幕文件，可以在<video>标签里面嵌套一个<track>标签。具体效果可以参考苹果官网的发布会视频。
- 音频
使用方法和视频差不多，直接上代码了，自己研究。
<p>音频</p>
<p>
<audio src="音频路径"
controls
loop
muted>
<track kind="subtitles" srclang="ch" src="字幕文件路径">
</audio>
</p>
组织页面内容
- 段落
在html中分别用h1-h6表示不同级别的标题，熟悉word或者写过论文的的同学就知道这个分级的作用了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组织页面</title>
</head>
<body>
<h1>计算机科学与技术</h1>
<h2>专业概述</h2>
<h3>专业由来</h3>
<h3>专业发展历史</h3>
<h2>培养计划</h2>
<h3>物联网方向</h3>
<h3>互联网方向</h3>
<h3>人工智能方向</h3>
</body>
</html>
- 内容划分
<article><section>
- 列表
- 有序列表
<h1>世界电影票房排行</h1>
<ol start="1">
<li>阿凡达</li>
<li>复仇者联盟</li>
<li>泰坦尼克号</li>
</ol>
其中<start>属性制定列表开始的第一个值
- 无序列表
使用方法和有序列表只差了一个地方就是把ol改成ul，那么就自然没有start属性了。
当然列表也可以嵌套列表。
<h1>世界电影票房排行</h1>
<ol start="1">
<li>阿凡达</li>
<li>复仇者联盟</li>
<ol start="1">
<p>复仇者联盟1</p>
<p>复仇者联盟2</p>
<p>复仇者联盟3</p>
</ol>
<li>泰坦尼克号</li>
</ol>
- 定义列表
具体见代码
<h1>设备详情</h1>
<dl>
<dt>机型名称</dt>
<dd>一加9R</dd>
<dt>制造商</dt>
<dd>OPPO&& One Plus</dd>
<dt>处理器</dt>
<dd>高通骁龙870</dd>
<dt>操作系统</dt>
<dd>Color OS 11</dd>
</dl>
- 导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
</head>
<header>
<h1><img src="https://www.huawei.com/cn/" alt="LOGO"></h1>
<nav>
<ul>
<li><a href="https:www.baidu.com">百度</a></li>
<li><a href="https:www.baidu.com"></a>你好</li>
<li><a href="https://bytedance.com"></a>世界</li>
</ul>
</nav>
</header>
</html>
- 表格
<table> 标签表示一个表格,<thead>表示表头，<tbody>表示主题部分。<tr>表示每一行的内容。<td>表示表头的内容，<td>表示表格主题的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>身高</th>
<th>体重</th>
</tr>
</thead>
<tbody>
<tr>
<th>小明</th>
<th>女</th>
<th>189cm</th>
<th>78kg</th>
</tr>
<tr>
<th>小赵</th>
<th>男</th>
<th>160cm</th>
<th>45kg</th>
</tr>
<tr>
<th>小K</th>
<th>女</th>
<th>170cm</th>
<th>41kg</th>
</tr>
<tr>
<th>小王</th>
<th>男</th>
<th>177cm</th>
<th>67kg</th>
</tr>
</tbody>
</table>
</body>
</html>
那么当我们需要用到合并的表格呢？其实可以使用rowspan属性来设置跨过几行
<tr>
<td rowspan="3">编程语言</td>
<td>C++</td>
<td>8</td>
</tr>
以上代码表示<编程语言>占3行，下面的两行（去掉自己的哪一行）最开始都是<编程语言>，相同的，还有多列合并，自己去试试吧。
表格标题可以使用标签，直接写在
表格的内容不止这些，有其他需要，自己动手，丰衣足食
表单
一般用来做用户输入的，包含文本框，复选框，单选框，提交按钮。下面我们看个具体的代码来了解一下。
- 文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单工具</title>
</head>
<body>
<form>
<p>
<label>用户名:</label>
<input type="text" placeholder="3-32"个字符>
</p>
<p>
<label>密码:</label>
<input type="password">
</p>
<p>
<label>年龄</label>
<input type="number">
</p>
<p>
<label>头像</label>
<input type="file">
</p>
<p>
<label>生日</label>
<input type="date">
</p>
<p>
<label>搜索</label>
<input type="search">
</p>
<p>
<label>电话</label>
<input type="tel">
</p>
<p>
<label>url</label>
<input type="url">
</p>
<p>
<label>email</label>
<input type="email">
</p>
<p>
<label>month</label>
<input type="month">
</p>
<p>
<label>time</label>
<input type="time">
</p>
<p>
<label>range</label>
<input type="range">
</p>
<p>
<label>color</label>
<input type="color">
</p>
</form>
</body>
<body>
<form>
<p> 请输入您最喜欢的水果(单选框)</p>
<input type="radio" name="fruit"> <label>香蕉</label>
<input type="radio" name="fruit"> <label>苹果</label>
<input type="radio" name="fruit"> <label>葡萄</label>
<p>请选择您最适合的衣服尺码(单选框)</p>
<label><input type="radio" name="size"> XS</label>
<label><input type="radio" name="size"> S</label>
<label><input type="radio" name="size"> M</label>
<label><input type="radio" name="size"> L</label>
<input type="radio" name="size" id="xl">
<label for="xl">XL</label>
</form>
<form>
<p>复选框</p>
<p>请输入你喜欢的水果</p>
<label><input type="checkbox">香蕉</label>
<label><input type="checkbox">猕猴桃</label>
<label><input type="checkbox">葡萄</label>
</form>
<p>
<label>提交</label>
<input type="submit">
</p>
</body>
</html>
- 下拉选择框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉选择框</title>
</head>
<body>
<p>下拉选择你最喜欢的水果</p>
<select name="fruit">
<option value="1" selected>苹果</option>
<option value="2" >火龙果</option>
<option value="3">芒果</option>
<option value="4">橘子</option>
<option value="5">榴莲</option>
<option value="6">木瓜</option>
<option value="7">西瓜</option>
<option value="8">葡萄</option>
</select>
</body>
</html>
如果想要某一项默认显示，那么加上selected就好了。
- 按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮</title>
</head>
<body>
<form>
<p>
<label>账号</label>
<input type="number">
</p>
<p>
<label>密码:</label>
<input type="password">
</p>
<button type="submit">点击提交</button>
<button type="button">点击提交</button>
</form>
</body>
</html>
这是最基本的一个提交过程，在实际应用中还要在本地的输入进行校验，然后提交到服务器。
以上是听了字节的前端基础课程做的笔记，欢迎大家前来补充。也可以访问一下我的个人博客哟，（博客搭建初期，还比较简陋）
扫一扫
881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
