HTML学习

Reignsky_

已于 2022-05-10 20:48:31 修改

阅读量304

点赞数 1

分类专栏：刘桑的学习日志文章标签：学习前端 html5

于 2022-05-10 20:46:44 首次发布

本文链接：https://blog.youkuaiyun.com/m0_52348948/article/details/124652660

版权

刘桑的学习日志专栏收录该内容

6 篇文章

订阅专栏

一、什么是HTML

HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。

HTML中不区分大小写，但是我们一般都使用小写

W3C：World Wide Web Consortium（万维网联盟）

W3C标准包括：

1、结构化标准语言（HTML、XML）

2、表现标准语言（CSS）

3、行为标准（DOM、ECMAScript）

基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<body>、</body>等成对的标签，分别叫开放标签和闭合标签。

二、HTML5标签

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;

2.7、链接标签

<a href="url" target="目标窗口位置">标签名字</a>

常见属性：href（规定链接的目标url）、target（在何处打开目标url，一般为_blank和_self）

2.8、图像标签

<!--   ../    表示上一级目录-->
<img src="图片位置（建议使用相对位置）" alt="若图片不存在，显示的文字" title="悬停文字" width="x" height="y">

2.9、锚链接

<!--锚链接
1、需要一个锚标记
2、跳转到标记
-->
<!--使用name作为标记-->
<a name="top">顶部</a>
<!--用#跳转到标记-->
<a href="#top">回到顶部</a>

2.10、列表标签

<!--有序列表-->
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

<!--无序列表-->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!--自定义列表
dl：标签
dt: 列表名称
dd：列表内容
-->
<dl>
    <dt></dt>
    
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>

2.11、表格标签

<!--表格table
行  tr
列  td
-->
<!--colspan 跨列-->
<!--rowspan 跨行-->
<table border="1px" cellpadding="0px" cellspacing="0px">
    <tr><!--第一行-->
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr><!--第二行-->
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

2.12、媒体元素标签

<!--音频和视频
src ：资源路径
controls：控制条
autoplay：自动播放
-->
<video src=""></video>

<audio src=""></audio>

2.13、iframe内联框架

<!--iframe内联框架
src：地址
w-h：宽度高度
name：框架标识名
即可内联网址，也可通过定义name当作一个容器,用a标签中的target跳转
-->

<iframe src="" frameborder="0" name="123"></iframe>
<a href="src" target="123">点击跳转</a>

三、页面结构分析

元素名	描述
header	标记头部区域的内容
footer	标记脚部区域的内容
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

四、表单

4.1表单的基础信息

<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：get,post 提交方式
    get:在url中能看到我们提交的信息，不安全，高效
    post：比较安全，传输大文件
-->
<form action="" method="">
    <!--文本输入框：-->
    <p><input type="text" name=""></p>
    
    <!--密码框：-->
    <p><input type="password" name=""></p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

结果如下：

4.2表单元素格式

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

4.2.1单选框

<!--单选框标签
input type = "radio"
value ：单选框的值
name：：表示组-->
<p>性别：
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
</p>

结果如下：

4.2.2多选框及按钮

<!--多选框
input type = "checkbox"
-->
<p>爱好：
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">代码
    <input type="checkbox" value="chat" name="hobby">聊天
    <input type="checkbox" value="game" name="hobby">游戏
</p>

<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置
-->
<p>按钮：
    <input type="button" name="btn1" value="文字">
    <input type="image" src="">
</p>

结果如下：

4.2.3下拉框、文本域、文件域

<!--下拉框，列表框
-->
<p>国家：
    <select name="列表名称">
        <option value="选项的值">中国</option>
        <option value="选项的值">美国</option>
        <option value="选项的值" selected>瑞士</option>
        <option value="选项的值">英国</option>
    </select>
</p>
<!--文本域-->
<p>文本域：
    <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p>文件域：
    <input type="file" name="files">
</p>

selected代表默认选项。（类似于checked）

结果如下：

4.3一些表单的简单验证

<!--邮箱验证-->
<p>邮箱：
    <input type="email" name="email">
</p>
<!--URL-->
<p>url:
    <input type="url" name="url">
</p>
<!--数字-->
<p>数量：
    <input type="number" name="num" max="" min="" step="">
</p>

<!--滑块
input type="range"
-->
<p>音量：
    <input type="range" name="voice" min="" max="" step="">
</p>
<!--搜索框-->
<p>搜索：
    <input type="search" name="search">
</p>

结果如下：