【狂神说Java】2021-04-02学习笔记：HTML5完整教学通俗易懂

最新推荐文章于 2022-06-18 19:34:09 发布

去薯条搞点码头

最新推荐文章于 2022-06-18 19:34:09 发布

阅读量280

点赞数 1

分类专栏：前端 javaweb

本文链接：https://blog.csdn.net/YOLO159/article/details/115416548

版权

javaweb 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

一、W3C标准

W3C标准包括：

结构标准语言（HTML、XML配置文件）
表现标准语言（CSS）
行为标准（DOM文档对象模型、ECMAScript）

DOCTYPE告诉浏览器，要使用什么规范

二、网页的基本标签

标题标签：<h1></h1>    至六级
段落标签：<p></p>
换行标签 ：<br />
水平线标签：<hr />
字体样式标签：粗体<strong></strong>         斜体<em></em>
注释和特殊符号：     注释：<!-- -->       
空格：&nbsp;       大于号：&gt;      小于号：&lt;      版权符：&copy;

三、图像标签

<img src="path" alt="text" title="text" width="x" height="y" />
src：图像地址（必填）
alt：图像替代文字（必填）
title：鼠标悬停提示文字（选填）
width：图像宽度（选填）
height：图像高度（选填）

../    --上一级目录

四、链接标签

1、页面间链接：从一个页面链接到另一页面

<a href="path" target="目标窗口位置">链接文本或图片</a>
href：链接路径，表示要跳转到哪个网页
target：链接在哪个窗口打开   常用值：_self（在自己的网页中打开）、_blank（在新标签中打开）

2、锚链接（例如：回到顶部）

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

同页面间：<a href="#top">回到顶部</a>
不同页面间：<a href="3.html#top">跳转</a>

3、功能性链接

邮件链接：<a href="mailto:zzzzzz@163.com">点击联系我</a>
QQ链接：在QQ推广中，直接复制代码

五、行内元素和块元素

块元素：无论内容多少，该元素独占一行（p、h1-h6）
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a、strong、em…）

六、列表标签

列表就是信息资源的一种展示形式，它可以是信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

列表类型：无序列表、有序列表、定义列表

无序列表：(应用范围：试卷、问答等。。。)
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
有序列表：（应用范围：导航、侧边栏）
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
定义列表：(应用范围：公司官网底部)
<dl>
    <dt>列表名称</dt>
    
    <dd>列表内容</dd>
    <dd>列表内容</dd>
</dl>

七、表格标签

基本结构：单元格、行tr、列td、跨行rowspan、跨列colspan

border：边框

<table border="1px">
    <tr>
        <td colspan="4">1-1</td>
    </tr>
    <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr><tr>
        <td>3-1</td>
        <td>3-2</td>
    </tr>
</table>

八、媒体元素

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

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

九、页面结构分析

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

十、iframe内联框架

<iframe src="path" name="mainFrame"></iframe>
src：引用页面地址
name：框架标识名

应用：网页中的小网页

十一、表单

<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="Button" value="提交"/>
        <input type="reset" name="Reset" value="清空"/>
    </p>
</form>

method：规定如何发送表单数据，常用值：get|post

action：表示向何处发送表单数据，可以是网站，也可以是一个请求处理地址

属性	说明
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时，指定按钮是否是被选中

下拉框：
<select name="列表名称">
    <option value="选项的值" selected>中国</option>
    <option value="选项的值">美国</option>
    <option value="选项的值">英国</option>
</select>

文本域：
<textarea name="textarea"></textarea>

文件域：
<input type="file" name="file">

十二、搜索框滑块和简单验证

邮件验证:
<input type="email" name="email">
URL验证：
<input type="url" name="url">
数字验证：
<input type="number" name="num" max="100" min="0" step="1">
滑块：
<input type="range" name="voice" max="100" min="0" step="1">
搜索框：
<input type="search" name="search">

十三、表单的应用

隐藏域：hidden
只读：readonly
禁用：disabled
默认值：value=""
增强鼠标可用性：<label for="mark">点击我，立即跳转到id为mark的地方</label>
			  <input type="text" id="mark">

十四、表单的初级验证

-为什么要进行表单验证呢？

-减轻服务器压力，保证数据安全性。

常用方式：

提示信息placeholder：（用在输入框中）
		<input type="text" name="username" placeholder="请输入用户名">
元素不能为空required：
		<input type="text" name="username" placeholder="请输入用户名" required>
正则表达式pattern：
		<input type="text" name="diymail" pattern="{到https://www.jb51.net/tools/regexsc.htm中查找}">