小桥流水78

这个屌丝很懒，什么也没留下！

热门标签

HTML笔记

作者：小桥流水78 | 2024-07-18 12:21:37

踩

HTML笔记

1.定义

1.1什么是HTML？

HTML：Hyper Text Markup Language (超文本标记语言)
超文本：可以放视频、图片等。

1.2HTML的基本结构

基本结构：
<html>
    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        我的第一个网页
    </body>
</html>

通常：
<head></head> 称为网页头部
<body></body> 称为主体部分
<body></body> 等成对的标签，分别叫开始标签和结束标签，单独呈现的标签（空元素），如<hr/>;意为用/来关闭空元素。

2.基本标签

2.1标题标签

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

注：不同等级的标题标签对比，级别越高标题的字体越大。

2.2段落标签

<p>...</p>

2.3换行标签

<br/>

2.4水平线标签

<hr/>

2.5字体样式标签

加粗：<strong></strong>
斜体：<em>...</em>

2.6注释和特殊符号

特殊符号	字符实体
空格特殊符号	&nbsp ;(牛逼三炮不让用)
大于号(>)	&gt ;
小于号(<)	&lt ;
引号(")	&quot ;
版权符号©	&copy ;

3.图像标签

3.1常见的图像格式

JPG     GIF     PNG     BMP

<img src="img.jpg"/>
<img src="img.gif"/>
<img src="img.png"/>
<img src="img.bmp"/>

3.2语法

<img src="图像地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度"/>

3.3示例

<img src="img.jpg" alt="图片加载中..." title="图片" width="200px" height="200px"/>

4.链接标签

4.1页面间链接

4.1.1语法

<a href="跳转链接路径" target="目标窗口位置">链接文本或图像</a>
注意：target指的是链接在哪个路径打开，默认值有_self(新网页替换本网页)和_blank（在增加一个新的标签网页，原有的网页被保存下来）
例如：
<a href="new.html" target="_self">跳转到new.html</a>  （新网页替换本网页）
<a href="new.html" target="_blank">跳转到new.html</a>  （在增加一个新的标签网页，原有的网页被保存下来）

4.1.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a href="Demo02.html" target="_blank">跳转到Demo2页面</a>
    </body>
</html>

4.2锚链接

从A页面的甲位置跳转到本页中的乙位置

从A页面的甲位置跳转到B页面中的乙位置

4.2.1语法

创建跳转标记：
<a name="跳转名称">乙位置</a>

创建跳转链接：
<a href="#跳转名称">甲位置</a>

4.2.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a name="top"></a>
        9月16日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例84例。其中境外输入病例22例（云南16例，河南2例，广东2例，上海1例，浙江1例），含2例由无症状感染者转为确诊病例（浙江1例，河南1例）；本土病例62例（福建61例，其中厦门市31例、莆田市28例、泉州市1例、漳州市1例；云南1例，在德宏傣族景颇族自治州），含1例由无症状感染者转为确诊病例（在福建）。无新增死亡病例。新增疑似病例2例，均为境外输入病例（均在上海）。
        <a href="#top">跳转到顶部</a>
    </body>
</html>

4.3功能性链接

4.3.1语法

<a href="mailto:bdqnWebmaster@bdqn.cn">链接文本或图像</a>

5.列表

5.1无序列表

<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ul>
快捷键：li*个数+Tab键

5.2有序列表

<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
</ol>

注：ol标签里只允许包含li标签

5.3定义列表

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>

<dt>:类目名
<dd>:类目列表

6.表格

6.1基本表格

<table border="表格外框的宽度">
    <tr>
        <th>1行1列的标题</th>
        <th>1行2列的标题</th>
        <th>1行3列的标题</th>
    </tr>
    <tr>
        <td>1行1列的单元格</td>
        <td>1行2列的单元格</td>
        <td>1行3列的单元格</td>
    </tr>
    <tr>
        <td>2行1列的单元格</td>
        <td>2行2列的单元格</td>
        <td>2行3列的单元格</td>
    </tr>
</table>

<th>:单元格的标题
<td>:数据本身

6.2跨列（只能加在td里面）

td中属性colspan

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="2">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>分数</th>
        </tr>
        <tr>
            <td colspan="2">张三</td>
            <td>1001</td>
            <td>80</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>1002</td>
            <td>56</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>1003</td>
            <td>75</td>
        </tr>
        </table>
    </body>
</html>
解析：
<td colspan="列数">数据内容</td>
（跨列指的是列数<左右>单元格的合并 去掉一个td）

6.3跨行（只能加在td里面）

td中属性rowspan

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="2">
        <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>分数</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>1001</td>
            <td>80</td>
        </tr>
        <tr>
            <td rowspan="2">李四</td>
            <td>1002</td>
            <td>56</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>1003</td>
            <td>75</td>
        </tr>
        </table>
    </body>
</html>
解析：
<td rowspan="行数">数据内容</td>
（跨行指的是行数单元格<上下单元格>的合并  去掉一个td）

7.媒体元素

7.1video播放视频

7.1.1语法

<video src="指定要播放的视频文件的路径" controls="controls">

注：controls是提供播放、暂停和音量的控件，""内不写的话默认是controls

7.1.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <video src="video/video.webm" controls="controls"></video>
    </body>
</html>

7.2video播放多种格式视频

7.2.1示例

防止各类浏览器无法播放视频

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <video controls="controls">
        <source src="video/video.webm"></source>
        <source src="video/video.mp4"></source>
        </video>
    </body>
</html>

7.3audio播放音乐

7.3.1语法

<audio src="指定要播放的音乐文件的路径" controls="controls">

7.3.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <audio src="music/music.mp3" controls="controls">
    </body>
</html>

7.4audio播放多种格式音乐

7.4.1语法

<audio controls="controls" >
    <source src="指定要播放的音乐文件的路径" type="audio/音乐文件类型"></source>
    <source src="指定要播放的音乐文件的路径" type="audio/音乐文件类型"></source>
</audio>

7.4.2示例

防止各类浏览器无法播放视频

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <audio controls="controls" >
            <source src="music/music.mp3" type="audio/mp3"></source>
            <source src="music/music.ogg" type="audio/ogg"></source>
        </audio>
    </body>
</html>

8.常用表单

表单语法：

<form method="get" action="Demo02.html">
    ...
</form>

method：规定如何发送表单数据，常用值是get/post
action：表示向何处发送表单数据

表单格式：

<input type="" name="" value=""/>

type：input元素类型
name：input元素名称（前端传入到后端，前端触发之后后端获取value值，前端里面基本看不到）
value：input元素的值

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

8.1文本框——text

8.1.1语法

<input type="text" name="" value="">

8.1.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form method="get" action="Demo02.html">
            <input type="text" name="keyword" value="请在此输入账号">
        </form>
    </body>
</html>

8.2密码框——password

8.2.1语法

<input type="password" name="" />

8.2.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="text" name="a" value="请在此输入账号"><br/>
            <input type="password" name="" />
        </form>
    </body>
</html>

8.3单选按钮——radio

8.3.1语法

<input type="radio" name="" value="" /><br/>

8.3.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="radio" name="sex" value="1" />男<br/>
            <input type="radio" name="sex" value="2" />女<br/>
        </form>
    </body>
</html>

8.4复选框(多选按钮)——checkbox

8.4.1语法

<input type="checkbox" name="" value="" /><br/>

8.4.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="checkbox" name="likes" value="1" />足球<br/>
            <input type="checkbox" name="likes" value="2" />篮球<br/>
            <input type="checkbox" name="likes" value="3" />排球<br/>
        </form>
    </body>
</html>

8.5列表框——select、option

8.5.1语法

<select name="">
    <option value=""></option>
</select>

8.5.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <select name="city">
                <option value="1">南京</option>
                <option value="2">北京</option>
                <option value="3">上海</option>
                <option value="4">深圳</option>
            </select>
        </form>
    </body>
</html>

8.6按钮——reset（重置）、submit（提交）、button

8.6.1语法

<input type="reset" value="重置" />   
<input type="submit" value="提交" />  后端可以获取
<input type="button" value="提交2" οnclick="事件"/> 后端无法获取

onclick：给某个元素添加事件

8.6.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="text" name="keyword" value="请在此输入账号"><br/>
            <input type="password" name="" /><br/>
            <input type="radio" name="sex" value="1" />男<br/>
            <input type="radio" name="sex" value="2" />女<br/>
            <input type="checkbox" name="likes" value="1" />足球<br/>
            <input type="checkbox" name="likes" value="2" />篮球<br/>
            <input type="checkbox" name="likes" value="3" />排球<br/>
            <select name="city">
                <option value="1">南京</option>
                <option value="2">北京</option>
                <option value="3">上海</option>
                <option value="4">深圳</option>
            </select><br/>
            <input type="reset" value="重置" />
            <input type="submit" value="提交" />
            <input type="button" value="提交2" οnclick=""/>
        </form>
    </body>

8.7默认元素——checked / selected

8.7.1示例

一般情况下：
<select></select>类型中使用selected
其它类型中使用checked

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form>
            <input type="text" name="keyword" value="请在此输入账号"><br/>
            <input type="password" name="" /><br/>
            <input type="radio" name="sex" value="1" />男<br/>
            <input type="radio" name="sex" value="2" checked=""/>女<br/>
            <select name="city">
                <option value="1">南京</option>
                <option value="2" selected="" >北京</option>
                <option value="3">上海</option>
                <option value="4">深圳</option>
            </select><br/>
            <input type="reset" value="重置" />
        </form>
    </body>
</html>

8.8多行文本框—— textarea

8.1.1语法

<textarea rows="行像素值" cols="列像素值"></textarea>

8.1.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <textarea rows="10" cols="30"></textarea><br/>
    </body>
</html>

8.9文件域——file

8.9.1语法

<input type="file" name="" accept="限制文件类型"/>

accept：不写默认所有文件都可以

8.9.2示例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="file" name="photo" accept="image/jpeg"/>
    </body>
</html>

9.表单高级应用

9.1隐藏域——hidden

9.1.1语法

<input type="hidden" name="" value="">

9.1.2示例

<input type="hidden" name="id" value="3">

9.2只读——readonly

9.2.1语法

<input type="text" name="" value="" readonly="readonly">

9.2.2示例

<input type="text" name="keyword" value="123" readonly="readonly">

9.3禁用——disabled

9.3.1语法

<input type="text" name="" value="" disabled=""><br/>

9.3.2示例

<input type="text" name="keyword" value="123" disabled=""><br/>

10.表单初级验证

10.1 placeholder

10.1.1语法

<input type="text" name="" placeholder="">

10.1.2示例

<input type="text" name="keyword" placeholder="请输入账号">

10.2 required

10.2.1语法

<input type="text" name="" required="">

10.2.2示例

<input type="text" name="keyword" required=""><br/>

10.3 pattern

10.3.1语法

<input type="text" name="" pattern="[输入范围]{字符长度}">

10.3.2示例

<input type="text" name="keyword" required="" pattern="[A-z]{8}">

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/845639