HTML学习随记
HTML学习笔记
1.HTML是什么？
Hyper Text Markup Language(超文本标记语言)。
超文本：包括：文字、图片、音频、视频、动画等。
2.HTML基本结构
DOCTYPE：告诉浏览器，我们要使用什么规范。
HTML：主题标签，最外层的标签
HEAD：代表网页头部
BODY：代表网页主题
TITLE：代表网页的标题
META：描述型标签，用于描述网页的信息
PS：meta标签一般用来做seo，例子如下
<meta name="keywords" content="111，在努力"> //用于搜索关键词
<meta name="description" content="TEST"> //用于描述网页
3.网页基本标签
标题标签用<h1>-<h6>来表示。
段落标签使用<p>标签来表示。
换行标签使用<br>标签来表示。<br/>是自闭合标签。
水平线标签使用<hr>标签来表示。<hr/>也是自闭合标签
字体样式标签：粗体使用<strong>你好</strong> 斜体使用<em>HTML<em>
特殊符号： < > © .................
4.图像标签
图像标签使用：<img>标签来表示。格式如下：
<img src="path" alt="text" title="text" ....>
src：代表图像的位置，可以是本地图片，也是可以是网络中的图片
alt：代表当图片加载不出来是，显示的文字
title：代表当鼠标悬停到图片上是显示的文字
5.超链接标签
超链接标签使用：<a>标签来表示，格式如下：
<a href="path" target="目标窗口位置">链接文本或图像</a>
path:链接路径
target:链接在哪个窗口打开，常用值，_self(在当前页打开)、_blank（另外打开一个标签打开）。
锚链接：
<a name="top"/> 顶部<!-- 使用name做一个锚标记 -->
......
<a href="#top">回到顶部</a>
功能型链接：
邮件链接：mailto:95199***@qq.com,例子如下
<a href="mailto:95199****@qq.com">点击联系我</a>
QQ链接：QQ推广
地址： https://shang.qq.com/v3/index.html
6.行内元素和块元素
快元素：无论内容多少，该元素多占一行，例如：（p、h1-h6.....div）
行内元素：内容撑开宽度，左右都是行内元素，例如（a、strong、em......span）
7.列表
1.什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式展示出来，以便浏览者能更快捷地获取相应的信息。
列表的分类：
无须列表：<ul>
<li>Java</li>
<li>Python</>
</ul>
应用范围：导航、侧边栏......
有序列表：<ol>
<li>Java</li>
<li>Python</>
<ol>
应用范围：试卷、问答......
自定义列表：
<dl>
<dt>位置</dt> <!-- 列表名称 -->
<dd>成都</dd>
<dd>绵阳</dd>
</dl>
应用范围：公司网站底部
8.表格标签
表格标签使用table表示：
<table>
<tr></tr> <!-- 行 -->
<td></td> <!-- 列 -->
</table>
9.媒体元素
视频元素：video
<video src="path" controls autoplay></video>
path:资源路径
controls:控制条
autoplay:自动播放
音频元素：audio
<audio src="path" controls autoplay></audio>
10.页面结构分析
元素名 描述
header:标题头部区域的内容（用于页面或页面中的一块区域）
footer：标记脚部区域的内容（用于整个页面或页面的一块区域）
section：Web页面中的一块独立区域
article：独立的文章内容
aside：相关内容或应用（常用于侧边栏）
nav：导航类辅助的内容
11.Iframe内联框架
在网页里面嵌套另外的网页。
<iframe src="path" name="" frameborder="0" .....></iframe> <!-- 基本使用方法 -->
path:地址
高级使用：
<ifame src="" name="hello" frameborder="0" .....></iframe>
<a href ="https://www.baidu.com" target="hello">点击跳转</a>
iframe 可以与 a标签配合使用
12.表单语法
12.1表单是使用<form>元素来定义的。
<form action="path" method="get">
</form>
以上就是一个表单的基本结构，其中
path:表单需要提交的位置：可以是一个页面，也可以是一个后台的url地址
method:表单提交方式，值为get/post
get与post的区别：
get:可以在url中看到提交的信息，不安全但高效
post:比较安全，可以传输大文件
12.2文本框和单选框
表单元素格式：
type:指定元素的类型，text,password,checkbox,radio,submit,rest,file,hidden,image和button，默认为text
name:指定表单元素的名称
value:元素的初始值。type为radio时必须指定一个值。
size:指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位。
maxlength:type为text或password时，输入的最大字符数。
checked:type为radio或checkbox时，指定按钮是否是被选中。
文本框：<input type="text" name="username"></input>
单选框:<input type="radio" value="boy" name="sex" checked>男</input>
<input type="radio" value="gril" name="sex">女</input>
提交后的格式为：sex=boy or sex=girl
其中:value:单选框的值。
name:表示组。
12.3按钮和多选框
<input type="checkbox" value="sleep" name="hobby">睡觉</input>
<input type="checkbox" value="code" name="hobby" checked>敲代码</input>
<input type="checkbox" value="chat" name="hobby">聊天</input>
<input type="checkbox" value="game" name="hobby">玩游戏</input>
其中：value:单选框的值。
name:表示组。
按钮标签：
<input type="button" name="btn1" value="登录"/>
value:为按钮命名。
12.4列表框文本和文件域
列表框（下拉框）
<select name="coutry" >
<option value="china" selected>中国</option>
<option value="us">美国</option>
<option value="jp">日本</option>
</select>
提交到后台的格式为: coutry=china(name=value);
文本域：
<textarea name="ps" cols="50" rows="10">文本内容</textarea>
其中:cols:行
rows:行
name:提交的值,格式为 name=文本内容
文件域：
<input type="file" name="files"></input>
12.5搜索框滑块和简单验证
1.邮箱验证
<input type="email" name="email"></input>
2.URL验证
<input type="url" name="url"></input>
3.数字验证
<input type="number" name="num"></input>
3.滑块
<input type="range" name="rank"></input>
4.搜索框
<input type="search" name="search"></input>
12.6表单应用
1.隐藏域 --> hidden
2.只读 -->readonly
3.禁用 -->disable
12.7表单初级验证
1.placeholder :提示信息
2.required: 非空判断
3.pattern：正则表达式
浙公网安备 33010602011771号