HTML基础标签与结构详解：从头到脚-优快云博客

本文链接：https://blog.youkuaiyun.com/js_qh/article/details/132251883

HTML

略

Head头部

ico图标

在线转ico格式

在线制作ico图标 | 在线ico图标转换工具方便制作favicon.ico - 比特虫 - Bitbug.net

使用格式

注意：在<head>标签中使用

HTML常用标签

前端页面中只有指定的标签才能被浏览器的内核解析，对于未知或自定义的标签浏览器会当成常规的文本识别

标题标签

只有 <h1> 到 <h6>

段落&换行标签

<p> 是段落标签，被<p> 作用的属于同一段落

<br> 单标签是换行标签

例如

    正如我轻轻的来；<br>
    我轻轻的招手，<br>
    作别西天的云彩<br>

水平线标签

<hr/>标签在 HTML 页面中创建一条水平线。

`<hr/>`标签里的属性

属性名	描述	取值
color	颜色	单词、RGB、6位16进制的颜色值
size	大小	取值1~7
width	宽度	数值px、数值%
align	对齐方式	center：居中、left：左对齐、right：右对齐

字体标签

<!-- 
        font标签：字体样式标签
            color属性: 设置字体颜色
            size属性: 设置字体大小    
        strong标签: 字体加粗
        em标签: 斜体    

        html主要作网页架构  相当于房子结构
        css 主要样式美化    相当于家装(美化)
-->

列表标签

无序列表

<ul type="" 可以改变每行前面的符号>

</ul>

有序列表

<ol type="" 可以改变每行前面的序号>

</ol>

自定义列表

<dl>

<dt></dt> 相当于标题

<dd></dd> 相当于描述

</dl>

图片标签

<img src="图片路径" width="可以设置图片的宽" title="鼠标指向图片显示的文字" alt="图片丢失显示的文字" />

也可以设置高

超链接标签

超链接跳转

    普通链接：<a href="https://www.baidu.com" target="_blank">百度一下</a><br />
    
    图片链接：<a href="https://image.baidu.com/search/index?tn=baiduimage&ps"> 
                <img src="../img/一燕.jpg" width="100px"> 
             </a><br>
             
    邮件链接：<a href="mailto:xx@126.com">发送e-mail</a>
    
    取消链接：<a href="javascript:void(0)">你是我的小面包</a>

锚点

锚点的使用需要满足两个点：一是要有跳转的标记点，二是可以进行跳转

本页面跳转

<a id="top" href="#buttom">跳到尾部</a> 给跳到尾部一个id或者name 值在链接处给目标的id或者name的值即可

<a id="buttom" href="#top">跳到首页</a> 和上面一样

不同页面跳转到指定锚点

在A页面

<a id="a_id"></a>

在B页面

<a href="A.html#a_id">跳转到a页面的内容中</a>

table表格

table:定义表格 tr:定义行 td:定义列 th:定义表格中头部（加粗）使用此定义的单元格里面的文字都会加粗 border: 边框大小 bordercolor:连框的颜色 cellpadding：内容与单元格之间距离 cellspacing：单元格与单元格之间距离

跨行跨列

    <!-- 实现跨行 -->
    <table border="1px" cellspacing="0px" cellpadding="20px" align="center" width="700px">
        <tr align="center">
            <th>姓名</th>
            <th>联系方式</th>
        </tr>
        <tr align="center">
            <!-- 跨行 -->
            <td rowspan="2">jack</td>
            <td>0371-6666</td>
        </tr>
        <tr align="center">
            <td>0371-8888</td>
        </tr>
    </table>

colspan跨列

    <!-- colspan 实现跨列 -->   
    <table border="1px" cellspacing="0px" cellpadding="20px" align="center" width="600px">
        <tr align="center">
            <td>姓名</td>
            <!-- colspan 实现跨列 -->
            <td colspan="2">联系方式</td>
        </tr>
        <tr align="center">
            <td>rose</td>
            <td>0371-8888</td>
            <td>0371-9999</td>
        </tr>
    </table>

结构区分

表格通常会有对应的头部信息、具体的内容信息、还有一些底部的备注，此时就需要考虑一个问题

如果不同区域中的位置因为跨行或跨列被占据了，那么整个表格都会发生错乱；为了避免出现跨行或跨列超出区域的问题，提供了区域划分的标签：thead、tbody、tfooter，内容默认都在tbody中

<!-- 表格中默认会将所有的内容都放在一个tbody中 -->
<table border="1px" cellpadding="0" cellspacing="0" align="center" width="50%">
            <!-- 头部 -->
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                </tr>
            </thead>
            
            <!-- 内容 -->
            <tbody>
                <tr>
                    <td>jack</td>
                    <td>男</td>
                </tr>
            </tbody>
            
            <!-- 脚部 -->
            <tfoot>
                    <tr>
                    <td>rose</td>
                    <td>女</td>
                </tr>
            </tfoot>
</table>

表格优缺点

优点

1.布局简单（因为就是纯表格的区域划分）

2.样式统一（只要确认好第一行的样式，后面的都会跟着变）

缺点

维护的时候超级麻烦（表格中有跨行和跨列的操作，一旦需要添加或者删除某一行或某一列的时候，相关联的所有的合并操作都需要重来）

表格应用场景

布局简单，变动的可能性比较小的情况下考虑使用表格

例如：登录、注册页，百度新闻的热搜新闻词模块，查询数据，用于数据展示

form表单

基础标签

    <!-- 
            定义这是表单,表单是用于数据提交
             action：提交到后台的请求路径(自己写的后台)
             method：提交到后台的请求方式
                    post: 不会把提交的内容在浏览器地址栏中显示，安全，提交的内容理论上来是无限
                    get：xxx/?username11=jack&passwrold22=123
                         把提交的内容在浏览器地址栏中显示，不安全，对内容有限制一般为1kb,提交的内容有限
                      type:表示当前输入框是什么类型  text、password、submit提交、reset重置
                      name:表示给这个输入框起的名字（也是用于后台提交的名字）    
                      placeholder:输入框中提示
                      title：鼠标悬浮时显示提示
                      autocomplete：关闭输入框中已提交历史记录
                      maxlength：设置当前输入框的最大长度（仅仅表示长度）
                      value：当前输入框中的默认值
                      readonly：设置当前输入框为 只读状态，但不影响数据提交
                      disabled：设置当前输入框为 不可用状态，不能数据提交
            -->

其他标签

    <form action="" method="">
        文本输入框:<input type="text" name="username" /><br>
        密码输入框:<input type="password" name="pwd" /><br>
        日期:<input type="date" name="date" /><br>
        月：<input type="month" name="month"/><br>
        日期日分秒：<input type="datetime-local" name="local" /><br>
        数据：<input type="number" name="number"/> <br>
        多选框：
            <input type="checkbox" name="box" value="吃饭"/>吃饭
            <input type="checkbox" name="box" value="睡觉"/>睡觉
            <input type="checkbox" name="box" value="打豆豆"/>打豆豆
            <input type="checkbox" name="box" value="敲代码"  checked="checked"/>敲代码<br>
        单选框：
            <input type="radio" name="sex" value="男" checked="checked" />男
            <input type="radio" name="sex" value="女" />女
            <input type="radio" name="sex" value="人妖" />人妖<br>
        文件上传：<input type="file" name="file"/><br>
        提交按钮：<input type="submit" value="登录"/><br>
        重置按钮：<input type="reset" /><br>
        按钮:<input type="button" id="button" value="点我啊"/>
             <button>我是一个button</button><br>
        隐藏域：<input type="hidden" name="hidden" /><br>
        下拉框：
            <select>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="郑州" selected="selected">郑州</option>
                <option value="杭州">杭州</option>
            </select><br>
        文本域：<textarea rows="10" cols="30"></textarea>
    </form>

Label

xxxxxxxxxx <input type="checkbox" name="box" value="吃饭" id="a"/> <label for="a">吃饭</label><input type="checkbox" name="box" value="睡觉" id="b"/> <label for="b">睡觉</label><input type="checkbox" name="box" value="打豆豆"/>打豆豆<input type="checkbox" name="box" value="敲代码"  checked="checked"/>敲代码<br>

iframe标签

将该链接的网页在与该链接所在的网页上显示

eg:

<a href="aa.html" target="myiframe">教职员工</a> <a href="bb.html" target="myiframe">在校学生</a> <a href="cc.html" target="myiframe">毕业校友</a>

<iframe frameborder="0" scrolling="auto" src="aa.html" name="myiframe" width="1000px" height="600px"></iframe>

标签划分及嵌套规则

标签划分

从行业的官方规范来讲，对标签的划分分两种

块元素：单独占整行（自带换行符），可以设置宽高属性的 <h1>~<h6>、<p>、<div>、<ul>、<table>..

行元素：可以在同一行显示，设置宽高不生效 <a>、<strong>、<em>、<span>..

目前行业中的程序员喜欢的划分，分三种

块元素：单独占整行（自带换行符），可以设置宽高属性的

行元素：可以在同一行显示，设置宽高不生效

行内块元素：也可以在同一行显示，既可以设置宽高（img-本身自带了宽高属性，display属性控制）

嵌套规则

a.行元素之间可以互相嵌套，行元素中不能嵌套块元素（html中是可以的，但是理论上来讲是不允许的）

b.块元素中可以嵌套任意的行元素，块元素之间也可以互相嵌套，但是有两种标签需要注意 p标签中是不允许嵌套其他任意的块元素 h系列的标签是不能互相嵌套（因为每个h标签都有默认的字体大小）

div和span

div是块标签

span是行标签

音频&视频

加入背景音乐的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        方式一
		<embed src="mp4/稻香.mp3">  <!-- hidden="hidden或者true" 隐藏  -->  <!-- 这个音乐标签放在head和body都是可以的 -->	
        方式二
<audio controls="controls">  <!-- controls="controls"  如果不写这个 则不显示 -->
		   <source src="mp4/稻香.mp3" type="audio/mp3"></source>  <!-- head和body 都可以-->
	</audio>
</head>
<body>
	<marquee direction="left">好好听！</marquee>  <!-- 相当于弹幕 -->
</body>
</html>

加入视屏的一种方式

<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title></title>  <video width="50%" height="50%" controls="controls">  <source src="mp4/张信哲的-信仰.mp4" type="audio/mp4"></source> </video> </head>`

<body> </body> </html>`

input框校验

<form action="" method=""> 用户名：<input type="text" name="phoneNum" required="required"/> <input type="submit" value="提交"/> </form>

input框正则

<form action="" method=""> 用户名：<input type="text" name="phoneNum" required="required" pattern="^1[356789]\d{9}$"/> <input type="submit" value="提交"/> </form>