首页 > 其他分享> 文章详细

HTML5学习笔记

2020-05-26 23:02:57 阅读：249 来源： 互联网

标签：选项网页标签笔记表单学习 HTML HTML5 按钮

HTML

什么是HTML

超文本标记语言（Hyper Text Markup Language），超文本包括文字、图片、音频、视频、动画等。

W3C标准

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

W3C标准包括：

结构化标准语言（HTML、XML）
表现标准语言（CSS）
行为标准（DOM、ECMAScript）

HTML基本结构

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

</body>
</html>

注释：

DOCTYPE：告诉浏览器我们使用的是什么规范

head：代表网页头部

body：代表网页主体

title：网页标题

meta：描述性标签，用来描述网页的一些信息

网页基本标签

标题标签：
一级标签
，
二级标签
，.......
段落标签：
段落
换行标签：
水平线标签：
字体样式标签：粗体，斜体
注释和特殊符号：&nbsp（空格），&gt（大于号），&lt（小于号），&copy（版权符号）

图像标签

<img src="" alt="" title="" width="" height="">

src：图片地址，相对路径/绝对路径（../：返回上一级目录）

alt：图片名字（必填）

title：悬停文字

width：宽度

height：高度

链接标签

a标签

<a href="" target="" ></a>

href：必填，表示跳转到哪个页面

target：表示窗口在哪里打开，_blank：在新的页面打开，__self：在当前网页打开

锚链接

需要一个锚标记
跳转到标记（#标记处）

功能性链接

邮件链接：mailto

QQ链接

列表

有序列表

<ol>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
</ol>

应用范围：试卷，问答

无序列表

<ul>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
</ul>

应用范围：导航，侧边栏

自定义列表

<dl>
    <dt>列表名称</dt>
    
    <dd>一</dd>
    <dd>二</dd>
    <dd>三</dd>
</dl>

应用范围：网页底部

表格

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

tr：行

td：列

border：边框

colspan：行跨列

rowspan：列跨行

媒体元素

<video src="文件路径" controls autoplay>Xxx.mp4</video>
<audio src="文件路径" controls autoplay>Xxx.mp3</audio>

controls：控制视频播放、暂停、音量以及下载

autoplay：自动播放

audio标签内选择mp4格式的文件依然可以播放，但只能播放音频

页面结构分析

header：网页头部

footer：网页脚部

section：网页主体

内联框架iframe

<iframe src="地址" name="框架名" frameborder="框架边框宽度" width="" height""></iframe>
<a href="框架的网址" target="上述框架名"></a>

表单

表单语法

<form aciton="www.123.com" method="get">
    
    <p>
        ...
    </p>
    <p>
        ...
    </p>
    
</form>

aciton：表单提交的位置，可以是网址，也可以是一个请求处理地址

method：提交方式

get：可以在URL中看到提交的信息，高效但不安全
post：比较安全，用来传输大文件

表单元素格式

文本输入框

<input type="类型" name="名字" value="默认初始值" maxlength="限长" size="框长">

密码框

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

单选框标签

<input type="radio" value="单选框的值" name="组名">

name：组名（组名相同即为一个组，只能选择组内其中一个选项）

多选框标签

<input type="checkbox" value="选项的值" name="组名" checked>选项一
<input type="checkbox" value="选项的值" name="组名">选项二
<input type="checkbox" value="选项的值" name="组名">选项三

checked：默认选项

按钮

<input type="button">普通按钮
<input type="image">图像按钮
<input type="submit">提交按钮
<input type="reset">重置按钮

下拉框，列表框

<p>
    <select name="列表名称">
        <option value="value1" selected>选项一</option>
        <option value="value2" >选项二</option>
        <option value="value2" >选项二</option>
        <option value="value2" >选项二</option>
    </select>
</p>

selected：默认选项

文本域

<textarea name="文本域名称" cols="50" rows="10">文本内容</textarea>

cols：列数

rows：行数

文件域

<input type="file" name="files">
<input type="button" vlaue="上传" name="upload">

邮件验证

<input type="email" name="email">

URL

<input type="url" name="url">

数字验证

<input type="number" name="num" max="100" min="0" step="10">

step：每次增加的值

搜索框

<input type="search" name="search">

增强鼠标可用性

<p>
    <label for="mark">点击此处</label>
    <input type="text" id="mark">
</p>

说明：鼠标点击“点击此处”即可编辑该文本框

表单的应用

隐藏域：hidden

只读：readonly

禁用：disabled

表单初级验证

提示信息：placeholder

非空判断：required

正则表达式：pattern

标签：选项,网页,标签,笔记,表单,学习,HTML,HTML5,按钮
来源： https://www.cnblogs.com/WangPeichengblogs/p/12969351.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9