HTML学习笔记
01 HTML详解
什么是HTML
hyper text markup language（超文本标记语言）
HTML发展史
html5+css3
跨平台
w3c 万维网联盟 world wide web consortium
http://www.w3.org/
http://www.chinaw3c.org/
w3c标准包括：
结构化标准语言
表现标准语言
行为标准
常用IDE：
记事本，Dreamwever，IDEA，WebStorm
使用IDEA创建html
自闭合标签的概念
meta 描述性标签，它用来描述我们网站的一些信息
meta一般用来做seo
02 网页基本信息
注释<!-- -->
doctype : 告诉浏览器我们要使用什么规范
<html>总标签</html>
title 网页的标题
meta标签
<meta name="keywords" content="">关键字
<meta name="description" content="">描述信息
03 网页基本标签
标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
一直到六级标签
段落标签
<p>一段一段的</p>
换行标签
<br/>
水平线标签
<hr>
字体样式标签
<!-- 粗体和斜体 -->
<strong>
<em>
注释和特殊符号
<!-- 注释内容 -->
空格 
大于 >
小于 <
版权符号：©
特殊符号记忆方式
04 图像标签
常见的图象格式
jpg、gif、png、bmp
<img src="" alt="" title="" width="" height="" />
src：图象地址；绝对路径和相对路径
../表示上一级目录
alt：图象的替代文字
title：鼠标悬停提示文字
width：图像宽度
height：图像高度
05 超链接标签及应用
文本超链接
图像超链接
<a href="path" target="目标窗口位置">连接文本或图像</a>
target常用值：_self, _blank
href: 表示要跳转到哪个页面
超链接：
1. 页面间链接
2. 锚链接
需要一个锚标记
使用name作为标记（现在使用id）
跳转到标记
href=“#name”
//在页面间链接尾部加入跳转到标记，可以直接打开页面跳转到固定位置<a href="path#name">
-
功能性链接
<a href="mailto:111111@qq.com">点击联系我</a>
06 行内元素和块元素
块元素：
无论内容多少，该元素独占一行
p,h1-h6
行内元素
内容撑开宽度，左右都是行内元素的可以排在一行
a, strong, em
07 列表标签
有序列表
<ol><li></li></ol>
无序列表
<ul><li></li></ul>
自定义列表
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
用在公司网站底部
08 表格标签
基本结构：
单元格
行
列
跨行rowspan="2"
跨列colspan="4"
表格table
行tr
列td
属性：
border="1px"边框
09 媒体元素
视频元素
<video src="../resource/video/1.mp4" controls autoplay></video>
音频元素
<audiosrc="../resource/audio/1.mp3" controls autoplay></audio>
10 页面结构分析
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于页面或页面中的一块区域） |
| section | web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
11 iframe 内联框架
<iframe src="path" name="mainframe"></frame>
src: 引用页面地址
name：框架标识名
<iframe src="" name="123" frameborder="0" width="500px" height="500px"></iframe>
<a href="http://www.baidu.com" target="123">点击跳转</a>
12 初识表单post和get提交
表单语法：
<form method="post" action="result.html">
<p>名字：<input type="text" name="name" value="admin" readonly></p>
<p>密码：<input type="password" name="pass" hidden value="123456"></p>
<p>
<input type="submit" name="button" value="提交">
<input type="reset" name="reset" value="重填">
</p>
<p>性别：
<input type="radio" name="sex" checked disabled>男
<input type="radio" name="sex" >女
</p>
</form>
get：高效
post：安全，传输大文件
headers中的from data 可以查看post提交的内容
13 文本框和单选框
表单元素格式：
| 属性 | 说明 |
|---|---|
| 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时，指定按钮是否是被选中 |
单/复选框有一个分组的概念
14 按钮和多选框
图片按钮，点击提交，和submit一个效果
<input type="image"src="../resource/image/1.jpg">
15 列表框文本域和文件域
选择列表框：
<select>
<option value="china">中国</option>
<option value="us">美国</option>
<option value="eth" selected>瑞士</option>
<option value="yindu">印度</option>
</select>
文件域：
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
16 搜索框滑块和简单验证
<p>邮箱：
<input type="email" name="email">
<input type="submit" name="123">
</p>
<p>url:
<input type="url" name="url">
<input type="submit" name="123">
</p>
<p>商品数量：
<input type="number" name="num" max="155" min="1" step="10">
<input type="submit" name="123">
</p>
17 表单的应用
增强鼠标可用性
点击文字直接进入对应的文本框编辑：
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
隐藏域：hidden
只读：readonly
禁用：disabled
18 表单初级验证
减轻服务器压力
常用方式
- placeholder 提示信息
- required 非空判断
- pattern 正则表达式
名字：<input type="text" name="name" placeholder="请输入用户名" required>
浙公网安备 33010602011771号