Web前端笔记(标签)

渔夫山泉

已于 2022-08-01 10:49:37 修改

阅读量397

点赞数

文章标签：前端 javascript html

于 2022-08-01 10:05:52 首次发布

本文链接：https://blog.csdn.net/W15105879792/article/details/126048270

版权

本文详细介绍了HTML的基本概念、语法、常用标签，包括标题、段落、字体样式、图片、视频、音频、超链接、列表、表格等，并提到了窗口化设计和过时的字体标签。HTML作为网页内容的基础，与CSS和JavaScript共同构建了前端开发的基石。

摘要由CSDN通过智能技术生成

Web前端知识点

html:网页里存在的东西，比如图片、超链接、文字
css：美化页面
JavaScript：前端编程
JQuery：轻量级的JavaScript框架
Vue：前后端分离

HTML

超文本标记语言

超文本：文本、超链接、表格、音乐、视频、图片等

标签的语法

标签的语法
<html> 标签内容 <\html>
<br />自闭和语言(单标签)
标签的嵌套：<html><body> 内容 <\body><\html>
标签属性<html 属性名='属性值'><\html>

标签不区分大小写，文件后缀名是.html 或者 .htm，html不需要编译，可以直接在浏览器上运行。

html标签

主体框架

<!-- DOCTYPE:文档类型 -->
<!DOCTYPE html>
<!-- 根标签：最外面的标签html,只能有一个 -->
<html>
    <!-- 头信息：文件描述，标题...版本、字符集，文件(css/js)的引用 -->
	<head>
        <!-- 元数据,内容不会显示在网页上 -->
		<meta charset="utf-8">
        <!-- 标题 -->
		<title></title>
	</head>
	<body>
        <!-- 网页的正文 -->
        在这里写的东西都会写到网页上，保存后就能实时查看，不需要编译，html遇到错误也不会停止运行，会跳过错误继续加载别的标签
	</body>
</html>

常用标签

一部分标签已经在html5当中过时，可以用css和javascrip完成。

标题标签

标题标签独占一行，支持1~6级标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

段落标签会在结束后自动换行两次，以此区别出其他段落

<p>
	<!-- 下面这个东西是用来自动生成随便长度的字符串，在Lorem后写个数字再按Tab可以再生成对应数字个单词 -->
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus molestias eos soluta optio corrupti necessitatibus nisi expedita, omnis repellendus porro rerum debitis ad perspiciatis. Atque quasi numquam distinctio fugit tenetur!
</p>

字体倾斜、加粗、下划线

<i>字体倾斜 </i>
<b>加粗 </b>
<u>下划线 </u>
<i><b><u>倾斜加粗又下划线 </u></b></i>

强调内容

强调的内容会比i标签更倾斜一些

<em>被强调的内容</em>
<strong>加粗的强调内容</strong>

预设标签

预设标签里的内容是怎么样的那显示出来的就会是怎么样，包括换行、缩进

<pre>
			第一行
			第二行
			第三行
</pre>

字体标签

已过时，用来设置颜色大小，color属性可以是red/green/blue等单词，也可以是十六进制数(#ffffff 白色)，还可以用rgb表示

font color="red" size = 1>红色</font>  <!-- 所有属性值可以加双引号也可以不加 -->
<font color=#00ff00 size = 2>绿色</font> <!-- size范围1~7 -->
<font color='rgb(0,0,225)' size = 3>蓝色</font><!-- rgb好像不支持蓝色的显示 -->

分割线

noshade:规定 hr 元素的颜色呈现为纯色

<hr size="1">
<hr size="100">
<hr size="100" noshade="noshade">
<hr size="100" noshade><!-- 属性名和属性一样的时候,可以省略属性值 -->

实体字符

如果在html中想表示<p>这样和标签重复的情况，需要用实体字符来代替，具体参照API

<p> 段落
&lt;p&gt;段落
<br>

图片标签

src：图片路径，只能使用工程下的资源，即用相对路径填写，用绝对路径只能在自己的电脑上运行

width/height：设置宽/高，当只设置一个属性时会等比例缩放

title：鼠标放在图片上会显示title内容

alt：当图片加载不出来时显示的内容，用来标识和区别

<img src="..\img\image.jpg"><!-- src属性必须填,只能使用工程下的资源(相对路径) -->
<img src="..\img\image.jpg" width="100"><!-- 设置大小 -->
<img src="..\img\image.jpg" width="100" height="200"><!-- 如果只设置一个,就等比例缩放 -->
<img src="..\img\image.jpg" width="100" title="鼠标放在图片上就会有标题">
<img src="..\img\image.jpg" width="100" alt="图片加载不出来的时候显示的内容">

视频标签

autoplay：自动播放

controls：加控制器(进度条、暂停、音量)

loop：循环播放

width/height：宽/高设置，和图片标签同理

<video src="..\img\video.mp4" height="400" controls loop>
			<!-- 这里可以选择备选资源列表,要用这些的话要把video里的src去掉 -->
			<source src="../img/不存在的资源1.mp4">
			<source src="../img/不存在的资源2.mp4">
			<source src="../img/不存在的资源3.mp4">
			<source src="../img/video.mp4">
</video>

可以嵌入网上的视频，效果仅同于开一个小窗播放，在网上视频下面点分享可以获得链接或者直接获得代码

<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=t0043c0o3gh" allowFullScreen="true" ></iframe>

音频标签

属性都同理视频标签

<audio src="..\img\audio.mp3" controls autoplay loop></audio>

超链接标签

herf：跳转的网页

target：_blank打开新的页面跳转，_self刷新当前页面跳转

<a href="demo01.html">链接到自己工程里的.html</a>
<a href="https://www.baidu.com/" target="_blank">链接到百度</a><!-- 一定要加协议()http等 -->
<a href="#">回到顶部</a>

锚点跳转(跳转到本网页指定位置)

<a name="随便取一个锚点名">锚点跳转的地方</a>
<a href="#随便取一个锚点名">通过锚点跳转到指定锚点</a><!-- 超链接跳转到固定的锚点(第39行),href里用#+锚点名来标记,如果有多个同名锚点,跳转到最上面的 -->

列表标签

有序列表：ol

无序列表：ul

子列表(列表中的一项)：li

type：列表序号的风格，可以选择阿拉伯数字类型，也可以选择罗马数字等类型

start：开始的序号

<ol type="I" start="2">
		<li>苹果</li>
		<li>香蕉</li>
		<li>梨</li>
	</ol>
	<ul type='square'>
		<li>肥牛</li>
		<li>黄喉</li>
		<li>撒尿牛丸</li>
</ul>

表格标签

<table>：表格声明

border：边框宽度
cellspacing：单元格之间的空隙
cellpadding:单元格内容和边框的边距
bgcolor:背景色
aligh:表格对齐方式(表格再在网页中的位置)

<caption>：表格的标题

<tr> 表格中的一行

aling：表格内容的对齐方式(内容在表格中的位置)

<td>：一个单元格的内容

aling：这个单元格内内容在该单元格中的位置
rowspan:放在td里使用,向下合并单元格
colspan:放在td使用,向右合并单元格

<table border="1" cellspacing=0 width=500 cellpadding=10 bgcolor=#FFA073 align="center">
		<caption>表格的标题</caption>
		<tr align="center">
			<td align="left">序号</td> <td >姓名</td> <td >年龄</td>
		</tr>
		<tr >
			<td rowspan="2">1</td> <td colspan="2">张三</td> 
		</tr>
		<tr>
			<td>李四</td> <td>20</td>
		</tr>
</table>

table的三部分(只是一个标记,是一个规范)

<table>
	<caption></caption>表的标题
	<thead></thead> 表的第一行(会被加粗)
	<tbody></tbody> 表主体(可以有多个)
	<tfoot></tfoot> 表尾
</table>

窗口化设计

将页面分割成几个窗口，可以在不同的小窗口里放不同的网页

noresize：窗口固定(不能调整大小)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>窗口化设计</title>
	</head>
<!-- 窗口化设计不需要有标签 -->
<frameset rows='30%,*' noresize>
	<frame src=demo01.html>
	<frameset cols = '50%,*' >
		<frame src=demo02.html name = '配合target,在超链接点击后会在这个框里跳出来'>
		<frame src=test.html >
	</frameset> 
</frameset>
</html>