本文已参与「新人创作礼」活动，一起开启掘金创作之路
1、HTML基础语法
1.1HTML概述
1.1.1 web的工作原理
- Client客户端/Server服务器架构
- Browser浏览器/Server架构
B S DB
浏览器服务器—>数据库服务器—>浏览器
1.1.2 Web开发的相关技术
- 浏览器端：
- HTML 页面的内容
- CSS 页面的样式
- JavaScirpt 页面的动态交互
- JQuery JS的框架
- 服务器端：
- Servlet
- JSP
- SSM框架
1.1.3 web浏览器
- IE浏览器
- Firefox 火狐浏览器
- Chrome 谷歌浏览器
- Safari 苹果
1.1.4 什么是HTML
HTML（Hyper Text Markup Language）超文本标记语言。 HTML编写的文件必须以.html结尾,由浏览器解析执行
1.2 HTML基本语法
1.2.1 标记
- HTML用于描述功能的符号称为标记，比如 p、h1
- 标记在使用时必须使用尖括号括起来
- 有封闭类型标记，也有非封闭类型的标记
- （1）封闭类型标记
也叫双标记，必须成对出现，
<开始标记>内容</结束标记>
注意：如果一个应该封闭的标记没有封闭，就会出现意想不到的错误。
- （2）非封闭类型的标记
也叫单标记：<标记/>
<br/> <!--单标记，换行的作用-->
1.2.2 元素和属性
- 元素：每一对尖括号包围的部分
三部分构成：开始标记+内容+结束标记
<h1>hello</h1> 称为h1元素
<p>你好</p> 称为p元素
- 属性：用来修饰元素的；
属性写在开始标记中；
可以写多个属性，多个属性用空格隔开；
格式是 xx属性=”” 方式
- 通用属性：绝大多数都支持
- <a id="">
- <a class="">
- <style> 样式，是CSS内联样式写法
1.2.3 注释
语法：<!—注释的内容 -->
1.3 HTML文档的结构
1.3.1 文档结构
分为三部分：
- (1)文档类型的声明—了解
- (2)文件头 <head></head>
- (3)文件体 <body></body>
说明：HTML文档要以<html>开始，以</html>结尾
1.3.2 文件头-head
- <title>标记： 设置网页的标题的
- <meta>标记： 1设置页面显示中文的编码
2设置页面自刷新
- <script>标记：写JavaScript代码的
- <style>标记： 写CSS代码的
- <link>标记： 1 引入外部的CSS样式
2 设置标题中的图标
2. body体中的标记
2.1 body体中的标记的分类
- 特殊字符的标记
空格 表示一个空格
小于< 表示一个小于号
大于> 表示一个大于号
- 标题标记
是<hn>表示，n是1-6数字组成
<h1>到<h6>是标题1到标题6
能够将内容加粗，大小h1最大,h6最小
- 段落标记
用<p>表示，表示一个独立的段落
- 换行标记
<br/>一个换行
- 字体标记
设置元素的字体、字号和颜色
<font face=”” size=”” color=””></font>
- 加粗、斜体、下划线标记
<b></b><strong></strong><!--加粗标记 -->
<i></i> <em></em><!--斜体标记 -->
<u></u><!--下划线标记 -->
- 居中标记
<center></center>
- 分割线标记
在网页中画一条水平直线
<hr/>
- 分区标记
常用于页面的布局
(1)块分区标记：<div><div>
(2)行内分区标记：<span></span>
2.2 标记的另一个分类
（1）块标记：会另起一行的标记
<h1> 、、、 <h6> <p> <center> <div>
（2）行内标记：不会另起一行的标记
<font> <em> <i> <strong> <u> <span>
3. 超链接和图片
3.1 超链接
标记：<a>内容</a>
属性：
- <a href=""> 超链接的跳转地址
- <a target=""> 超链接的跳转方式
- <a href="_blank" > 新页面打开
- <a href="_self" > 默认，本页面打开
3.2 图片
标记：<img />
属性：
- <img src="" /> 显示的图片的路径名称
- <img width="" /> 设置图片的宽度
- <img height="" /> 设置图片的高度
- <img title="" /> 设置图片的标题
- <img border="" /> 设置图片的边框
3.3 图片热点分割技术
标记：
<map>
<area shape="" coords=""></area>
</map>
属性：要写在<area>标记中
- shape=”” 区域的形状 rect矩形
- coords=”” 坐标
3.4 超链接的特殊使用1—返回页面顶部
<a href=”#top”>xxxxx</a>
3.5 超链接的特殊使用2 –发送邮件
<a href=”mailto:23434@qq.com”>xxxxx</a>
4. 列表
列表是将具有相同特征或者具有先后顺序的几行文字进行对齐排列。
分类：
- （1）无序列表
标记：无序<ul></ul>列表<li></li>
- （2）有序列表
标记：有序<ol></ol> 列表<li></li>
5、表格
标记
- <table></table>表格的开始和结束
- <tr></tr>表格的行
- <td></td>表格的列
- <caption></caption>表格的标题
- <marquee></marquee>将内容飘动的效果
属性
- <tr border="" > 设置表格的边框
- <tr cellspacing="" >设置表格行列之间的空隙
- <tr width="" > 设置表格的宽度
- <tr height="" > 设置表格的高度
- 水平对齐方式 (可用于<table> <tr>和<td>中)
<table align="left/center/right">
- 垂直对齐方式 (只能用于<tr>或者<td>标记中)
<tr valign="top/middle/bottom">
- 不规则表格的处理
跨行：<tr rowspan="num">
跨列：<tr colspan="num">
6. 表单
6.1 表单的作用
用于显示、收集信息，并提交信息到服务器端，服务器接收到信息后在保存到数据库端。
标记：<form></form>表单的开始和结束
6.2 表单项的分类
（1）input标记系列
文本框 <input type=”text” />
密码框 <input type=”password”/>
单选 <input type=”radio”/>
多选按钮 <input type=”checkbox”/>
提交按钮 <input type=”submit” />
重置按钮 <input type=”reset”/>
普通按钮 <input type=”button”/>
--用于执行客户端的脚本，结合JS来使用
隐藏域 <input type=”hidden”/>
--在表单中包含不希望用户看到的信息
文本选择框：上传文件
<input type=”file”/>
（2）非input标记系列
A <label>标记
--语法：<label>文本</label>
--作用:将文本与控件绑定在一起，单击文本，效果如同单击空间一样
B 选项框—下拉框
标记:<select><!--选项框的开始-->
<option></option><!--选项框中的选项-->
</select><!--选项框的结束-->
C 多行文本框
标记:<textarea></textarea>
属性：cols指定多行文本框的列数
rows指定行数
D 控件分组
标记<fieldset></fieldset>为控件分组
<legend></legend>给分组指定一个标题
