HTML笔记

最新推荐文章于 2025-02-24 21:39:51 发布

Sirius_Cao

最新推荐文章于 2025-02-24 21:39:51 发布

阅读量193

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_44371305/article/details/115047925

版权

什么是HTML

HTML：Hyper Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等
标签在网页中的作用，通常用于标题或主题，体现标签语义化。

标题标签

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

PS: 演示不同的标题标签的浏览器中的默认显示效果。

段落标签

段落标签主要用于显示段落文字。

<p>这是第一段。</p>
<p>这是第二段。</p>

换行标签 

<hr/>用户绘制水平线条

字体样式标签

加粗
斜体
 与 也可以定义粗体或斜体文本，这个只是视觉上的效果。上述的标签，除了具有视觉上的效果，还表示其文本是重要的，要突出显示。

标签
 用于对文档中的行内元素进行组合。
 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对  应用样式，那么  元素中的文本与其他文本不会任何视觉上的差异。
 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

上标下标

特殊符号

  空格
> >
< <
" ”
© ©

图像标签

在这里插入图片描述常见的图像格式：JPG 、GIF、PNG、BMP、jfif

链接标签

页面间链接：从一个页面链接到另外一个页面
在这里插入图片描述
锚链接：从一个位置链接到另一个位置

创建步骤:
（1）创建跳转标记

<a name="top">顶部</a>

（2）创建跳转链接

<a href="#top">回到顶部</a>

功能性链接：实现打开电子邮件、打开下载链接、打开qq聊天对话窗口等功能

在线咨询美女客服：
<a href="tencent://message/?uin=116497509&Site=美女客服&Menu=yes">
	<img src="http://wpa.qq.com/pa?p=2:116497509:41" 
		title="在线咨询美女客服" alt="在线咨询美女客服" />
</a>

行内元素和块元素

块元素

无论内容多少，该元素独占一行（p、h1-h6、div）
行内元素

内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em、span)

列表

无序列表
无序列表的特性：

没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

<h2>热搜</h2>
<ul>
    <li>特朗普突然现身白宫发表最短讲话 新</li>
    <li>遭虐死女子被配阴婚?亲属回应</li>
    <li>嫦娥五号完成第一次中途修正 热</li>
    <li>3地现本土病例 出来的人去哪了</li>
    <li>拜登将发表感恩节演讲</li>
</ul>

有序列表
有序列表的特性:

有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等

<h2>热搜</h2>
<ol>
    <li>特朗普突然现身白宫发表最短讲话 新</li>
    <li>遭虐死女子被配阴婚?亲属回应</li>
    <li>嫦娥五号完成第一次中途修正 热</li>
    <li>3地现本土病例 出来的人去哪了</li>
    <li>拜登将发表感恩节演讲</li>
</ol>

定义列表

定义列表的特性:

没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>
<dl>
    <dt>蔬菜</dt>
    <dd>白菜</dd>
    <dd>萝卜</dd>
    <dd>黄瓜</dd>
</dl>

列表对比
在这里插入图片描述

表格

<table>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
    </tr>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
    </tr>
</table>

表格的跨列

<table  border="1">
    <tr>
        <td colspan="2">学生成绩</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>98</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>95</td>
    </tr>
</table>

在这里插入图片描述
表格的跨行

<table  border="1">
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>95</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>88</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>91</td>
    </tr>
</table>

在这里插入图片描述
表格的跨行和跨列

<table  border="1" >
    <tr>
        <td colspan="3">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>95</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>88</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>91</td>
    </tr>
</table>

在这里插入图片描述

HTML5的媒体元素

视频元素： video

<video src="视频路径"  controls></video>

音频元素：audio

<audio src="音频路径" controls></video>

表单

HTML 表单用于收集不同类型的用户输入，以便向服务器提交数据的一种技术。

表单语法：

<form  method="post" action="result.html">
    <p>用户名：<input name="name" type="text" >  </p>
    <p>密码：<input name="pass" type="password" >  </p>
    <p>
        <input type="submit" name="btnOk" value="提交"/>
        <input type="reset" name="btnReset" value="重填"/> 
    </p>
</form>

参数说明：

method 规定如何发送表单数据，常用值：get、 post
get, 明文提交数据, 数据在4k以内
post, 编码后提交数据，可以提交大量数据

表单元素格式：

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

在这里插入图片描述
文本框：

密码框：

在这里插入图片描述
单选按钮

为了实现互斥效果，一组name值必须相同。

<input name="gen" type="radio" value="男"  checked  />男
<input name="gen" type="radio" value="女" />女

复选框
在这里插入图片描述
为了实现同组复选的效果，name值也必须相同。

<input type="checkbox" name="interest" value="sports"/>运动
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

下拉列表框
在这里插入图片描述
注意事项:

一个<select>中至少包含一下<option>。
name和value属性是必须的，其他属性并不是必须的。
一个列表框中只能有一个列表项默认被选中。

<h2>请选择你喜欢的歌星</h2>
<select name="singes" size="10">
    <option value="1" selected="selected">周杰伦</option >
    <option value="2">刘若英</option >
    <option value="3">许巍</option >
    <option value="4">刘德华</option >
</select>

按钮
在这里插入图片描述
PS: 普通按钮目前没有实现功能，需要后期配合javascript代码实现。

多行文本域

当要填写的内容过多，一行填写不了时，需要使用多行填写时，可以使用多行文本域
在这里插入图片描述
文件域

当需要在表单中上传文件时，需要用到文件域。
在这里插入图片描述
使用文件域时，method必须设置为post，且必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。

使用accept来控制上传文件的类型，使用multiple来控制是否允许上传多个文件

网址

当要输入网址时，可以使用网址文本域，浏览器会自动验证URL地址格式是否正确。

<p>请输入你的网址:<input type="url"  name="userUrl"/></p>

数字

当要输入数字时，可以使用数字文本域，浏览器会提供数字下拉框进行数字的选择

<p>
    请输入生日:
    <input type="number" name="month" min="1" max="12" step="1"/>月
    <input type="number" name="day" min="1" max="31" step="1"/>日
</p>

滑块

<p>请设置满意度:<input type="range"  name="range1" min="0" max="10" step="2"/></p>

通过滑块可以实现另一种输入数字的操作效果，step为每次滑动时数字的增减值。

隐藏域

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

有时，我们希望向服务器提交数据时，带上当前用户的标志信息（但是用户可能不关心这类信息），则可以使用隐藏域，将标志信息隐藏起来，连同普通信息一起向服务器提交。

只读与禁用

对与表单中的某些数据，如果不希望用户修改，可以使用只读属性进行限制。

对于表单中的某些功能，如果不希望用户操作，可以使用禁用属性进行限制。

<input name="name" type="text" value="张三"  readonly>
<input type="submit "  disabled   value="保存" >

W3C HTML5标准中，规定对于布尔类型的属性，属性值可以省略

标注

标注的作用：

增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上

<label for="male">标注的文本</label>
<input type="radio" name="gender" id="male"/>