HTML总结
HTML Hyper Text Markup Language 超文本标记语言
点一下下面的链接试一试，会有意外发现啊！
1.基本概念
2.HTML的基本骨架
3.常用标签
4.列表类标签
5.表格类标签
6.表单类标签
1、基本概念
1.1 网页和网站
- 网站有N个网页组成
- 网页中包含：文字，图片，视频，音频，链接，程序······
- 网页的内容由HTML技术实现
- 网页的后缀通常都是.html
1.2 浏览器和渲染引擎
- 常见的浏览器:谷歌，Safari，欧朋，，IE，火狐，
- 不同的浏览器有不同的内核（渲染引擎)
-
Google Chrome (Chromium/Blink) ,
-
lnternet Explorer(Trident),
-
Firefox (Gecko) ,
-
Safari(苹果)(webkit) ,
-
欧朋Opera (blink)
-
1.3 网页三层结
- 结构(structure)层:使用HTML技术实现，就是给网页提供内容
- 表现(presentation)层:给网页提供样式(布局，美化)
- 行为(behavior)层:使用JS实现，JS是前端程序员最需要掌握的技术
1.4 开发工具
- 推荐使用VSCode工具，好处:小巧，插件多
2. 快捷键
- shift + alt+向下箭头=>复制上一行
- tab =>向后移动代码
- shift + tab =>向前移动代码
- !+ tab = > html基本骨架!是英文的!
- div.wraper + tab =>生成一个带名字的div
- 鼠标中键＋向下拽=>同时选中多行
- 键盘上的del键=>删除文件
- F2 =>重命名
- shift + alt + f =>格式化代码
- ctrl + f =>查找内容并替换内容
1.5标签，属性，元素
- 标签:标签都是使用<>包起来，分单标签和双标签，分块级(男)标签，行内(女)标签和行内块(人妖)标签
- 男标签独占一行，可以设置宽高；
- 女标签并排显示，不可以设置宽高；
- 人妖标签能并排显示，可以设置宽高；
- 标签与标签之间是有关系，分并列（兄弟）关系和嵌套（父子）关系
- 属性:写在开始标签中，以属性名="属性值"这种形式出现，一个标签中可以有N个属性
- 属性也分两类:公有属性，特有属性
- 公有属性: class, id, title, style
- 元素:标签+属性+标签之间的内容 例如：
标签、属性、元素之间的关系：
<h1 title="haha">我是一个h1标签</h1>
标签：<h1></h1>
属性:title="haha"
元素：<h1 title="haha">我是一个h1标签</h1>
2.HTML的基本骨架
<html lang="en"> 根标签
<head> 头
<meta charset="UTF-8">
<!--设置网站的SEO信息 SEO是搜索引擎优化（search engine optimization）-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--字符编码集 charset:字符集 name:属性 viewport:视图，页面 content:内容 device:设备(网页的宽度，设备的宽度给网页) initial:初始化 scale:缩放(屏幕的初始状态,0-1,按照设备的宽高去定义页面的宽高,) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title> 标题
</head>
<body> 主体
</body>
</html>
问：head标签里面有哪些功能？
答: 1. 页面的标题
2. 页面的图标
3. 引入外部资源 css js
4. 有利于SEO优化
2.1 文档声明
<!DOCTYPE html> HTML5的文档声明
作用：告诉浏览器，以什么样的标准来解析我们写的代码
2.2 html元素
html元素是一个网页的根元素，只有这一个
lang属性:指定网页的语言zh-CN表示中文 <meta charset="zh-CN">
2.3 head元素
- 网页的头部:基本上在对网页的设置，都会在head实现
- title属性:指定网页的标题的
- meta属性: charset="utf-8”如果不指定，会出现乱码
2.4 body元素
网页的主要内容都是写在body中的
3.常用标签
3.1 h系列-标题标签 男标签
h1->h6 加粗 大小逐级递减
3.2 p标签 男标签
段落标签 浏览器会自动适用换行,我是男的我霸道~~~~
用心学习，早日暴富
用心学习，早日暴富
用心学习，早日暴富
3.3 换行标签<br/>单标签
强制换行
3.4文本格式化 女标签
默认字体：早日暴富
1.strong标签b标签使字体加粗 <strong>早日暴富</strong><b>早日暴富</b>
2.em标签i标签使字体倾斜 <em>早日暴富</em><i>早日暴富<i/> <br>
3.del标签s标签使字体加删除线 <del>早日暴富 <del/><s>早日暴富</s>
4.ins标签u标签使字体加下划线 <ins>早日暴富</ins> <u>早日暴富</u>
3.5无语义标签
div 男标签,我就是一个盒子别把我想太复杂
span 女标签,我也是一个盒子，但我是个女的，可以和其她姐妹并排走(和其她女标签并排显示)
3.6 图片标签![]()
<img src="" alt=""> 单、人妖标签
- 属性
- src:图片的路径（来源)
- alt:当图片加载错误时显示的文字
- title:当鼠标悬停在图片上显示的文字
- width:图片的宽度
- height:图片的高度
- border:图片的边框
- 属性的特点
- 属性之间部分先后顺序
- 属性名与属性值之间以键值对的形式存在
- 属性名与属性值之间以等号分隔﹐属性值要以引号包裹;
3.7路径和连接
<a href=""> 双、女标签
- 路径
- 相对路径：在同一个文件夹直接找名字 向上一级../ 向下/；
- 绝对路径：从根目录出发的路径；
- 链接标签<a ></a>
- 外部链接<a href="www.qq.com">写完整的协议域名网址
- 内部链接<a href="index.html">直接写文件名即可
- 属性
- href:指定跳转的页面
- title:鼠标悬停显示的文字
- target: _self(默认会覆盖原来的窗口)，_blank(会以新的窗口打开)窗口的打开方式
- #:会阻止页面跳转但是会刷新页面
- 锚点
- 链接使用#
- 目标标签id值与连接#号后面一致
<a href="#属性值"></a>
<p id="属性值">
3.8注释和特殊字符
- <!--我是注释--> 编辑器使用Ctrl+/快捷键
- 特殊字符
注意：特殊字符(也叫转译字符)要加上；
4.列表类标签
1. 无序unorder列表-男标签: ul li无序序列书写顺序：
<ul>
<li> </li>
</ul>
- type=""的type属性定义列表顺序类型 square是方块 circle是空心
- 去掉默认的小圆点 list-style:none; 例如下面代码：
<div>
<ul>
<li>中国
<ul tyle="circle">
<li>北京
<ul tyle="square">
<li>东城
<ul tyle="square">
<li>天安门</li>
</ul>
</li>
<li>西城</li>
<li>宣武</li>
</ul>
</li>
<li>天津</li>
<li>河北</li>
<li>上海</li>
</ul>
</li>
<li>俄罗斯</li>
<li>美国</li>
</ul>
</div>
- 有序order列表-(男): ol li 和无序列表一样
- type=""的type属性定义列表顺序 可以是1、①、I
- 去掉序号 list-style-type: none;
<ol>
<li> </li>
</ol>
- 自定义defination列表: dl dt(title是标题) dd(description是描述)
<dl>
<dt></dt>
<dd></dd>
</dl>
5.表格类标签
1. 标签<table border="" width="" height="" cellspacing="0" cellpadding="" align="center">
<caption>定义表格标题 </caption>
<thead> 表格头部
<tr>
<th></th> 表头 标签：居中加粗
</tr> 行
</thead>
<tbody> 表格主体
<tr>
<td></td> 表格单元格
</tr>
</tbody>
<tfoot> 表格脚注
<tr>
<td></td> 表格单元格
</tr>
</tfoot>
</table>
- table属性：
- border 规定表格边框的宽度
- width 规定表格的宽度
- height 表格的高度
- cellpadding 规定单元边沿与其内容之间的空白
- cellspacing 规定单元格之间的空白
- align 表格位置
- 行合并(rowspan="")
- 列合并(colspan="")
- border-collapse:collapse合并内外边距(去除表格单元格默认的2个像素内外边距) 用表格标签能实现多种样式表格
<body>
<table border="1" width="600" height="400" cellspacing="0" align="center">
<caption>计科二班课表</caption>
<tr >
<th>时间类别</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>第一节</td>
<td>数学</td>
<td>语文</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td>第二节</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td>第三节</td>
<td>科学</td>
<td>英语</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td>第一节</td>
<td>数学</td>
<td>语文</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td colspan="6">课间休息</td>
</tr>
<tr>
<td>第一节</td>
<td>数学</td>
<td>语文</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr>
<td>第一节</td>
<td>数学</td>
<td>语文</td>
<td>语文</td>
<td>英语</td>
</tr>
</table>
</body>
6.表单类标签
1. form表单标签:收集用户信息(表单控件、提示文本、表单域form标签:将用户信息传给服务器) <form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
<form action="http://www.baidu.com" method="GET" name="名称">
各种表单控件
</form>
- action="" 表示收集完数据后，给哪个服务器 例如:action="www.baidu.com"
- method="" 表示提交数据给服务器的方式 例如:method="GET"
- name="表单名称" 可以通过request.form（"name"）的方法来获得form表单中的有关数据
只有表单还不行，表单中放表单项，也叫表单控件
- input属性
- 文本框：text、
- 密码框：password、
- 单选按钮：radio、
- 复选框：checkbox、
- 普通按钮：button、
- submit(提交按钮)、
- reset(重置按钮)、
- image(图片形式提交按钮)
- file(文件域)
- value属性 value="输入内容" (显示在输入框)
4.name属性 name=""(定义一个名字，区别不同的输入框，给后台使用)
- label标签：
用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
<!-- 提示文本通常会放到label标签中 label-for-id：当点击提示文本时，获取焦点 -->
①<label for="iphone">手机号码： </label><input id="iphone" type="text">
②<label> 用户名：<input type="" name="" value=""> </label>
手机号码： <input type="text">
与
<label for="iphone">手机号码：</label><input id="iphone" type="text">
的区别
加入(label-for-id)标签可以在点击文字或点击文本框时都能获取焦点
- 下拉菜单 ：
<select><option value="1990">1990</option> </select> 年
<select>
<!-- 我们提交给服务器的数据是value的值 -->
<!-- option标签中的写的1990是给用户看的 -->
<option value="1990">1990</option>
</select> 年
<option selected="selected"(selected属性表示默认选中)></option>
- 文本区域
<textarea name="" id="" cols="30" rows="10"></textarea>
<textarea name="" id="" cols="30" rows="10" placeholder="请介绍下你自己吧！"></textarea>
- placeholder(占位符)=""可以设置输入框内的虚拟提示文字。
- disabled 禁用此文本域
- readonly 设置为只读
- outline-style:none 文本域不显示轮廓线
- resize:none 不可以被拖拽
表单可以和表格标签、序列标签结合做出更多好看的页面：
例如这个：
<table align="center">
<caption>青春不常在，抓紧谈恋爱</caption>
<form action="url地址" metrod="提交方式(post隐藏信息/get显示信息)" name="">
<tr>
<td><label for="">性别</label></td>
<td><input type="radio" name="sex" checked>男
<input type="radio" name="sex">女
</td>
</tr>
<tr>
<td><label for="">生日</label></td>
<!-- multiple选择多个 -->
<td> <select name="" id="" placeholder="请输入年" >
<option value="请输入年">请输入年</option>
<!-- selected="selected"(selected属性表示默认选中) -->
<option value="1991" >1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
</select>
<select name="" id="" placeholder="请输入月">
<option value="请输入月">请输入月</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
<select name="" id="" placeholder="请输入日">
<option value="请输入日">请输入日</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>
</td>
</tr>
<tr>
<td> <label for="">所在地区</label></td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td><label for="">婚姻状况</label></td>
<td><input type="radio" name="婚姻">未婚
<input type="radio" name="婚姻">离婚
<input type="radio" name="婚姻">丧偶
</td>
</tr>
<tr>
<td><label for="">学历</label></td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td><label for="">月薪 </label></td>
<td><input type="text" value=""></td>
</tr>
<tr>
<td><label for="">手机号码</label></td>
<td><input type="number"></td>
</tr>
<tr>
<td><label for="">昵称</label></td>
<td><input type="text"></td>
</tr>
<tr>
<td><label for="">喜欢类型</label></td>
<td> <input type="checkbox">御姐
<input type="checkbox">萝莉
<input type="checkbox">女汉子
<input type="checkbox">女神
</td>
</tr>
<tr>
<td><label for="">自我介绍</label></td>
<td><textarea name="" id="" cols="30" rows="10" placeholder="请介绍自己"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="免费注册">
<input type="reset">
</td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" checked="checked" name="agree">我同意注册条款和加入</td>
</tr>
<tr>
<td></td>
<td><a href="">我是会员，立即登录</a></td>
</tr>
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</form>
</table>
