HTML学习笔记

HTML学习笔记

HTML即Hyper Text Markup language（超文本编辑语言），超文本包括文字，图片，音频，视频，动画等等

注：IDEA HTML注释的快捷键是 ctrl+/

网页基本标签

<!--标题标签-->
<h1>一级标题</h1>    以此类推，h6是六级标题

<!--段落标签-->
<p> </p>

<!--换行标签-->
<br/>

<!--水平线标签-->
<hr/>

<!--字体样式标签-->
粗体:<strong>粗体</strong>
斜体:<em>斜体</em>

<!--特殊符号-->
空格:&nbsp;  大于号:&gt;  小于号:&lt; 等等

图像标签

链接标签

<!-- a标签是链接标签
href: 必填，表示要跳转到哪个页面
target: 表示链接在哪个窗口打开
_blank: 在新标签中打开
_self : 在当前网页打开-->

<a href="http://www.baidu.com" target="_self">点击跳转百度</a>

<!--锚链接:
需要一个锚标记,herf后加#号跳转
-->
<a herf="# 锚链接"></a>

<!--功能性标签
邮件标签:mailto: 邮件地址
还有比如QQ链接等等-->
<a href="xxxxxxxxxxxxx@....."></a>

列表标签

<!--列表-->
<!--1.有序列表-->
<ol>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>....</li>
</ol>
<!--2.无序列表-->
<ul>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
    <li>....</li>
</ul>
<!--3.自定义列表
dl:自定义列表标签
dt:列表名
dd:列表内容
-->
<dl>
    <dt>字母</dt>
    <dd>A</dd>
    <dd>B</dd>
    <dd>.....</dd>

    <dt>数字</dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>.....</dd>
</dl>

表格标签

<!--表格标签
行：tr
列：td-->
<table>
    <tr>
<!--colspan 跨列，下为跨2列-->
        <td colspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
<!--rowspan 跨行,下为跨2行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>

媒体元素

<!--媒体元素
src: 资源路径
controls: 控制器
autoplay: 打开网页自动播放-->
<video src="..资源路径" controls autoplay></video>

<audio src="..资源路径" controls autoplay></audio>

页面结构分析

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

iframe内联框架

在页面中嵌套一个网页:

<!--内联框架 iframe
src: 地址
w-h: 高度和宽度
name: 框架标识名-->
<!--例如，下为内联一个百度页面-->

<iframe src="http://www.baidu.com" name="标识" frameborder="0"></iframe>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K8rNDSVm-1615984324338)(D:\学习截图\内联框架.png)]

表单语法：

<!--表单form
action: 表单提交的位置，可以是网页或请求处理地址等等
method: 有host和get，表示2种提交方式
get方式: 可以在url界面看到提交的内容，不安全但高效
host: 安全，可以传输大文件
type: 规定输入框的格式
-->
<h1>注册</h1>
<form action="爷的第一个网页.html" method="get"></form>
<!--文本输入框: input type="text"-->
<p>名字：<input type="text" name="username"></p>
<!--密码输入框:input type="password"-->
<p>密码：<input type="password"name="pwd"></p>

<!--下为提交和重置-->
<p>
    <input type="submit">
    <input type="reset">
</p>

如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9e6yK8Ha-1615984324340)(D:\学习截图\表单语法.png)]

表单元素格式

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

简单应用：

• 隐藏域 hidden
• 只读 readonly
• 禁用 disabled

单/多选框/按钮

<!--单选框标签
radio:
name :表示分组
value: 表示单选框的值
checked: 默认选项
-->
<p>
    单选性别：
    <input type="radio" value="boy" name="sex">
    <input type="radio"value="girl" name="sex">
</p>
<!--多选框type改为checkbox即可，注意也要分组。-->
<!--按钮:按钮标签为button,图片也可用作按钮
input type="button"   	普通按钮
input type="image" 	src="...跳转路径"  图像按钮
input type="submit"   	提交按钮
input type="reset" 	  	重置按钮

-->

文本/文件域/下拉框

<!--下拉框，列表框
selected: 表示默认值
value：列表名称，按value值提交-->
<p>下拉框
    <select name="列表名称" >
        <option value="china" selected>中国</option>
        <option value="美国">美国</option>
        <option value="英国">英国</option>
    </select>
</p>

<!--文本域/反馈-->
<p>
    
    <textarea name="textarea" cols="10" rows="50" >文本内容</textarea>
</p>

<!--文件域-->
<p>
    <input type="file" name="files">
</p>

搜索框/滑块与简单验证：

<!--邮箱验证-->
<p>邮箱
    <input type="email" name="email">
</p>
<!--网址-->
<p>url
    <input type="url" name="url">
</p>

<!--数字验证-->
<!--min: 最小值
max: 最大值
step: 步长-->
<p>商品数量
    <input type="number" name="number" min="0" max="100" step="1">
</p>
<!--滑块-->
<p>
    <input type="range" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>
    <input type="search" name="search">
</p>

表单初级验证

<... placeholder="提示信息"...> 		--设置一个提示信息
<... required...>		--设置非空判断
<...pattern="正则表达式"...> 		--利用正则表达式验证

正则表达式

正则表达式，又称规则表达式，通常被用来检索、替换那些符合某个模式(规则)的文本。

正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配的一个或多个字符串。

如图：

特点：

1. 灵活性、逻辑性和功能性非常强；

2. 可以迅速地用极简单的方式达到字符串的复杂控制。

描述在搜索文本时要匹配的一个或多个字符串。

如图：

特点：

1. 灵活性、逻辑性和功能性非常强；

2. 可以迅速地用极简单的方式达到字符串的复杂控制。