前端HTML（干货小知识）

基本骨架：

       html:整个网页

       head：网页头部，存放css

       body:网页主体

       title：网页标题

VS Code快速生成骨架：! (英文)+Enter/Tab

标签：

    种类：分为双标签 <></> 和 单标签<>

    关系：父子关系  兄弟关系（也就是所谓的上下级和同级的关系）

   

    段落：<p>  内容  </p>

    强制换行：<br>

    水平线：<hr>

---

文本格式换标签：(都是双标签 

格式：

如：

<strong>你好！（内容）</strong>

（以下标签自带强调含义）

1. strong  加粗
2. em  倾斜
3. ins 下划线
4. del 删除线

（不带强调含义）

1. b  加粗
2. i  倾斜
3. u 下划线
4. s  删除线

---

图像标签 （在网页中插入图片）

格式：<img src="图片的URL">

src 用于指定图像的位置和名称，是<img>的必须属性

属 性	作 用	说 明
alt	替换文本	图片无法显示文字的时候显示文字
title	提示文本	鼠标停在图片上显示文字
width	图片宽度	值为数字，要加单位一，般为px
height	图片高度	值为数字，要加单位一，般为px

src也是img标签的属性，故使用格式一样

<img src=" "  alt="  "  title=" ">

属性名="属性值"

属性写在括号里面，标签名后面，属性之间用空格隔开，属性之间不区分先后顺序

---

路径

 路径可以理解为地址，我们可以通过这些地址在电脑中找到我们需要的东西

路径分为：

• 相对路径——从当前文件位置出发查找
• 绝对路径——从盘符出发查找

（大抵可以理解为  假设我要找到我邻居的吹风机

相对路径：我家-->邻居家-->吹风机

绝对路径：地球-->中国-->邻居家-->吹风机

）

路径；查找图片

相对路径；引用文件所在位置，即图片相对于HTML页面的位置

同一级 <img src="hh" />

上一级 / <img src="images/hh" />

上一级 ../ <img src="../hh" />

绝对路径；在电脑中的图片

---

音频标签

<audio src="音频的URL"></audio>

属 性	作 用	特殊说明
src（必须属性）	音频URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	注意:浏览器一般会禁用自动播放功能

属性用法和图片相似，可以参考上面

---

视频标签

<video src="视频的URL"></video>

属 性	作 用	特殊说明
src(必须属性)	视频URL	支持格式：MP4、WebM、Ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	注意:浏览器一般会禁用自动播放功能

---

列表 

作用：使内容排列整齐

 

无序列表

（没有顺序的时候用）

主要以ul标签嵌套li标签实现

ul标签：无序列表

li标签：列表条目

如：

 <ul>
        <li>蓝莓</li>
        <li>草莓</li>
        <li>山竹</li>

 </ul>

效果：

 注意：

<ul></ul>固定格式，只能放<li></li>其他不行

但是<li></li>标签中可放其他标签（容器） 

(总而言之：ul只能嵌套li标签，li标签里面可以再嵌套其他标签)

 

有序列表

（有顺序的排列）

主要以ol标签嵌套li标签实现

ol标签：有序列表

li标签：列表条目

如：

  <h4>科目喜爱榜</h4>
    <ol>
        <li>计算机</li>
        <li>数学</li>
        <li>语文</li>
    </ol>

结果：

 

 注意：

<ol></ol>固定格式，只能放<li></li>其他不行

但是<li></li>标签中可放其他标签（容器） 

(总而言之：ol只能嵌套li标签，li标签里面可以再嵌套其他标签)

 

 自定义列表

主要以dl标签嵌套dt和dd标签实现

dl标签：定义列表

dt标签：定义列表的标题

dd标签：定义列表的内容

如：

<dl><!--<dl>中只能有<dt>(皇上)<dd>（妃子，多个）-->
        <dt>小说资源</dt><!-- 项目目标 -->
        <dd>微博</dd><!-- 解释说明 -->
        <dd>QQ</dd><!-- 解释 -->
        <dd>wx</dd>
    </dl>

结果：

 

 注意：

<dl></dl>固定格式，只能放<dt></dt>和<dd></dd>其他不行

但是<dt></dt>和<dd></dd>标签中可放其他标签（容器） 

(总而言之：dl只能嵌套dt和dd标签，dt和dd标签里面可以再嵌套其他标签)

---

表单

作用：收集用户信息

使用场景：登录页面、注册页面、搜索区域

<form action="url地址" method="提交方式（get）" name="表单域名称">

        各种表单元素控件

    </form>

form：表单区域 

action：发送数据的地址

input标签

格式 <input type="......"> 注：type里面填入属性值

type属性值	说明
text	文本框，用于输入单行文本
password	密码框（效果输入以*****的形式）
radio	单选框
checkbox	多选框
file	上传文件

 

input标签占位文本

placeholder属性

作用：提示信息

格式：<input type="..."  placeholder="提示信息">

 如：

<input type="text" placeholder="内容">

结果

text：表明这是一个文本框

placeholder：是提示我要写什么

单选框radio

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

 

如：

 <input type="radio" name="gender" checked>男
    <input type="radio" name="gender" >女

结果：

因为 checked，所以默认选中男 

上传文件-file

一般情况下，file只能上传一个文件，但若想实现文件多选功能只需加一个multiple

代码：<input type="file" multiple>

 效果：

多选框 - checkbox 

别名：复选框

默认选中：checked

 爱好：看小说<input type="checkbox" name="hobby" value="看小说" />
      睡觉<input type="checkbox" name="hobby"value="睡觉" />
      打代码<input type="checkbox" name="hobby" value="打代码"  />

效果：

 

如果想要开始就默认选中的效果，在想选择的项后面加上 checked（可借鉴radio）

下拉菜单 

主要以select嵌套option实现

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

格式：

格式：

<select>

        <option selected="selected" (默认选项)></option>>选项1</option>

        <option>选项2</option>

    </select>

代码：

籍贯：
    <select>
        <option>外星人</option>
        <option selected="selected">地球村</option>
        <option>火星</option>
    </select>

 效果：

文本域 

textarea:文本域元素（大量文字输入，如留言）

    <textarea row="3" （显示多少行） cols="20" (一行几个字)>(长宽定义)

        文本内容

    </textarea>

如： 

 今日吐槽：<textarea row="5" cols="8">
            醒醒，别做白日梦了！！！！！
        </textarea>

 效果：

点击左下角小箭头可以将框拉大拉小

 

label标签

作用：增大点击范围

两种写法：

 <label>input元素定义注释</label>

    <label for="sex"></label>

    <input type="radio" name="sex" id="sex" />

    <!--for 和id 里的内容要一致-->

 

按钮-button 

 button 不会提交，但通过这个按钮会触发某件事，如，发送验证码（搭配js使用）

type属性值	说明
submit	提交按钮，点击后提交数据到后台（默认功能）
reset	重置按钮，点击后将表单控件恢复到默认值
button	普通按钮，默认没有功能，与JavaScript使用

 方式一：

<input type="button" name="sumbit" value="提交">

 <input type="button" name="sumbit" value="删除">

方式二：

<button type="属性值">按键上的内容</button> 

 那我们上一个表单完整代码吧！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>

<body>
    <caption>用户调查</caption><br>
    姓名：<input type="text" size="12" maxlength="20" name="user_name"><br>
    网址：<input type="text" size="12" maxlength="20" name="user_name"><br>
    密码：<input type="password" size="12" maxlength="20" name="psw"><br>
    确认密码：<input type="password" size="12" maxlength="20" name="psw"><br>
    请上传你的照片：<input type="file" name="photo"><br>
    请选择你喜欢的音乐：<input type="checkbox" value="rock" name="m1" checked>摇滚乐
    <input type="checkbox" value="jazz" name="m2" checked>爵士乐
    <input type="checkbox" value="pop" name="m3" checked>流行乐<br>
    请选择你居住的城市：<input type="checkbox" value="beijing" name="m1" checked>北京
    <input type="checkbox" value="shanghai" name="m2" checked>上海
    <input type="checkbox" value="guangzhou" name="m3" checked>广州<br>
    请选择你喜欢的网站：<select name="web" size="4" multipe>
        <option value="sina" selected>新浪</option>
        <option value="yahoo" selected>雅虎</option>
        <option value="sohu" selected>搜狐</option>
        <option value="google" selected>google</option>
        <option value="163" selected>网易</option>
    </select><br>
    您的最高学历/学位：<select name="degree">
        <option value="1">博士后</option>
        <option value="2" selected="selected">博士</option>
        <option value="3">硕士</option>
        <option value="4">学士</option>
        <option value="0">其他</option>
    </select><br>
    请留言：<textarea name="say" rows="8" cols="60"></textarea><br>
    <input type="button" name="sumbit" value="提交" onclick="add()">
    <input type="button" name="sumbit" value="删除" onclick="delete()">
</body>

</html>

 效果：

---

 

链接

话不多说：上代码！！！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h4 id="one">1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    <!-- target 打开窗口的方式 默认值为_self当前窗口 _blank 新窗口 -->
    <a href="https://www.douyin.com/?ug_source=microsoft_mz01" target="_blank">抖音</a>
    <h4>2.内部链接：网站之间相互链接，即目录文件之间的相互跳转</h4>
    <a href="图像.html" target="_blank">图像</a>
    <h4>3.空链接；#</h4><br />
    <a href="#">空链接</a>没考虑好什么链接
    <h4>4.下载链接：地址链接的是文件.exe或是zip等压缩包形式</h4>
    <a href="11.zip">下载文件</a>
    <h4>5.网页元素（音频，文字，图片）的超链接,将网页元素看成文字放链接中间</h4>
    <a href="http://steam.shyihuob.com/down/steam2"><img src="images/mg.jpg" /></a>
    <h4>6.锚点链接；点击链接，快速定位到页面中的某个位置（href属性中#名字，名字为目标标签的id）</h4>
    <a href="#one">返回顶部</a>


</body>

</html>

效果：

 

 

---

表格 

标签：table嵌套tr，tr嵌套td/th

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

 表格本身属性

属 性	说 明
alingn	位置（center-居中  left-靠左  right-靠右）
border	边框
cellpadding	边框和文字距离
cellspacing	单元格之间的距离
width	表格宽度 （可以填百分值也可以填数字）
height	表格高度（可以填百分值也可以填数字）

格式：

 <table border="2" width="90%" alingn="center" height="20" alingn="center" cellspacing="0">

 

 表格结构标签

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

 

合并单元格

作用：多个单元格变成一个，合并同类单元格

""中填入数字，即需要合并的单元格数量

rowspan="" ：跨行合并，保留最上面的单元格

colspan=""：跨列合并，保留最左面的单元格

注意：合并单元格需要删除多余的单元格！！！！！！ 

 <table border="2" width="90%" aling="center" height="20" alingn="center" cellspacing="0">
        <th>
        <td>语文</td>
        <td>数学</td>
        <td>总分</td>
        </th>
        <tr>
            <td>张三</td>
            <td>99</td>
            <td rowspan="2">100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>99</td>
            <!-- <td >100</td> 删除-->
            <td>199</td>
        </tr>

    </table>

 效果：

 

 

---

网页布局 

标签：

<div></div> ：division 分割分区 （大盒子）

<span></span>： span 跨度 跨距 横着显示（小盒子）

此标签无意义，盒子用来装东西的 如图片，文字等

起布局网页的作用

如：

<body>
    <div>div标签单独占一行</div>
    <div>div标签单独占一行</div>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>

</body>

效果：

 

---

字符实体

作用：在网页中显示预留字符

显示结果	描述	实体名称
	空格	 
<	小于号	&lt;
>	大于号	&gt;

---

到这里就结束啦！

感谢观看！

有问题可以在评论区提出！！！❀❀❀