0003 HTML知识点
HTML （超文本标记语言）
001 软件架构
C/S(客户端/服务器架构),B/S（浏览器/服务器架构）
002 资源分类
1）静态资源：使用静态页面开发技术发布的资源
特点；
① 所有用户访问得到的结果是一样的
② 如，文本、视频、音频，html，css，javascript
③ 如果用户请求的是静态资源，那么服务器会将静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎，可以展示静态资源
2）动态资源：使用动态网页技术发布的资源
①所有用户访问的结果可能不一样
②如果用请求的是动态资源，那么服务器会执行动态资源，并转换为静态资源，然后发送给浏览器
图示
003 ：静态资源相关技术及功能
html：用于搭建基网页，展示网页的内容css：用于美化页面，布局页面
004 html概念
-
Hyper Text Markup Language： 超文本标记语言
- 超文本是用超链接的方法，将各种不同空间文字信息组织在一起的网状文本
- 标记语言：由标签构成的语言。 <标签名称> 如html，mxl
-
标记语言不是编程语言
005 html语法入门
语法：
- Htm文档后缀名：名称.html 或者名称.htm
- 标签分为：
- 围堵标签：有开始标签和结束标签。如<html></html>自闭合标签：
- 自闭合标签：开始标签和结束标签在一起：如<br/>
- 标签可以嵌套
- 需要正确的嵌套，不能你中有我，我中有你
-
错误的嵌套方式： <a><b></a></b>；正确的写法：<a><b></b></a>
- 在开始标签中可以定义属性，属性是由键值对构成，值需要用引号（单双都可）引起来
- Html的标签不区分大小写，但是建议使用小写
006 html标签
01 文本标签：构成html最基本的标签
(1) html：html文档的根标签
(2) head：头标签。用于指定html文档的一些属性，引入外部的资源
(3) title：标题标签
(4) body：体标签
(5) <!DOCTYPE html>:html5中定义html文档
(6) <meta charset=”UTF-8”>：指定字符集编码
02 文本标签：和文本有关的标签
(1) 注释： <!--注释的内容--->
(2) h1-h6:标题标签，从大到小
(3) p: 段落标签
(4) <br/>: 换行标签
(5) <hr/>:水平线标签
① 属性：
1) 颜色： color
2) 宽度： width
3) 高度：size
4) 对齐方式：align（center居中，left左对齐，right右对齐）
(6) <b>:字体加粗
(7) <i>:字体斜体
(8) <center>:文本居中{已淘汰}
(9) <font>:字体属性{已淘汰}
① 属性：
1) color：颜色
2) size：大小
3) face：字体
② 属性定义：
1) Color:
1. 英文单词：red,green,blue
2. rgb(值1,值2,值3)：值的取值范围：0~255【知道就行】
3. #值1值2值3：值的范围：00~FF之间。如：#FFFFFF
2) Width：
1.数值：width='20'，数值的单位，默认是px（像素）
2.数值%,表示占比相对于父元素的比例
03 图片标签
(1) <img/> ：图片标签
① 属性src： 指定图片的位置
② 路径写法：相对路径（./表示当前目录; ../表示上一级目录）
04列表标签
(1) 有序列表{少用}：给一堆数据添加列表语义，并IE一推数据中是由先后顺序的
格式：
<ol>
<li></li>
</ol>
(2) 无序列表{常用}:给一堆数据添加列表，并且数据中所哟的数据都是无先后顺序的
格式：
<ul> <li></li> </ul>
说明：
标签：使用<ul>和<li>标签
方法：<ul>和<li>标签的type属性指定符号的样式，取值如下： disc：实心的圆圈，square：实心的方块，circle：空心的圆圈
(3) 自定义列表：给数据添加列表语义格式：
<dl> <dt></dt><!-- dt就是用来定义列表中标题 --> <dd></dd><!-- dd是给每个标题添加描述信息 --> </dl>
05 超链接标签
语法格式：<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性：
href：指定访问资源的URL（统一资源定位符）
target：指定打开资源的方式
_self:默认值，在当前页面打开
_blank:在空白页面打开
1.外部链接
例如<a href=“http://www.baidu.com” target="_self">百度</a>
2.内部链接：网站内部页面的相互链接，直接链接内部页面名称即可
例如<a href=“index.html”>首页</a>
3.空链接
如果当时没有确定链接目标时，<a href="#">首页</a>
4.下载链接
如果href里面地址是一个文件或者压缩包（地址链接是文件.exe或zip等压缩包形式），会下载这个文件，<a href=“hawen.rar”>下载文件</a>
5.网页元素链接
在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接
6.锚点链接
（1）在链接文本的href属性中，设置属性值为 #名字 的形式，如<a href="#two">第2集</a>
（2）找到目标位置标签，里面添加一个id属性=刚才的名字，如<h3 id=“two”>第2集介绍</h3>
06 div和span
(1) Div：每一个div占满一整行。块级标签
(2) Span：文本信息在一行展示，行内标签，内联标签
07 语义化标签：html5中为了提高程序的可读性，提供了一些标签
(1) <header>:页眉
(2) <footer>:页脚
08 表格标签
(1) table：定义表格
① width：宽度
② borde：边框
③ cellpadding：定义内容和单元格的距离
④ cellspacing：定义单元格之间的距离，如果指定为0，则单元格之间的线会合为一条
⑤ bgcolor：背景色
⑥ align：对齐方式
(2) tr:定义行
(3) td：定义单元格
(4) th：定义表头单元格
(5) <caption>:表格标题
(6) <thead>：表示表格的头部分
(7) <tbody>:表示表格的体部分
(8) <tfoot>: 表示表格的腿部分
09 表单标签
form: 用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
属性：
action：指定数据提交的URL
method： 指定提交的方式
分类：一共有7种，2种比较常见
get:
1. 请求参数会在地址栏中显示，会封装到请求行中（HTTP协议之后讲解）
2. 请求参数长度是有限制的
3. 不太安全，容易在地址栏中被查到
post
1. 请求参数不会在地址栏中显示，会被封装到请求体中（HTTP协议之后讲解）
2. 请求参数长度没有限制
3. 较为安全
注意：
表单项中的数据要想被提交，必须指定其name属性
表单项标签
input：可以通过type属性值，改变元素展示的样式
type属性：
text：文本输入框，默认值
* placeholder： 指定输入框的提示信息，当输入框的内容发生变化时，会自动清空提示信息
password：密码输入框
radio：单选框
注意：
1） 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样
2） 一般会给每一个单选框提供value属性，来指定其被选中后提交的值
3） checked属性，可以指定默认值
checkbox：复选框
注意：
1） 一般会给每一个单选框提供value属性，来指定其被选中后提交的值
2） checked属性，可以指定默认值
file: 文件选择框
hidden：隐藏域,用于一些信息的提交
按钮：
1. submit：提交按钮，可以提交表单
2. button：普通按钮
3. image：图片提交按钮
src属性用来指定图片的路径
label：指定输入项的文字描述信息
注意：
label的for属性一般会和input的id属性对应，如果对应了，则点击label区域，会让input输入框获取焦点
select：下拉列表
子元素： option指定列表项
例如
<select name="rpovince">
<option value="">--请选择--</oprtion>
<option value="1">北京</oprtion>
<option value="2" selected>上海</oprtion>
<option value="3">南京</oprtion>
</select>
textarea：文本域
cols: 指定行数，每一行有多少个字符
rows： 默认多少行
例如-注册页面
<form action="#" method="get"> <label for="username">用户名:</label> <input name="username" id="username"> <br/> 密码:<input name="password"><br/> 性别： <input type="radio" name="gender" value="man" checked>男 <input type="radio" name="gender" value="woman">女<br/> 爱好: <input type="checkbox" name="hobby" value="shopping" checked>购物 <input type="checkbox" name="hobby" value="java">java <input type="checkbox" name="hobby" value="game">游戏 图片： <input type="file" name="file"> 隐藏域： <input type="hidden" name="hidden"> 取色器：<input type="color" name="color"> 日期： <input type="date " name="date"> 日期： <input type="datetime-local " name="date"> 省份： <select name="rpovince"> <option value="">--请选择--</oprtion> <option value="1">北京</oprtion> <option value="2" selected>上海</oprtion> <option value="3">南京</oprtion> </select> 文本域： <textarea name="name" cols="30" rows="23"></textarea> <input type="submit" value="登录"> <input type="button" value="一个按钮"> <input type="image" value="图片地址"> </form>
其中 :表示空格
浙公网安备 33010602011771号