HTML概述:
HTML: Hyper Text Markup Language 超文本标记语言
超文本: 比普通文本功能更加强大,可以添加各种样式
标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行
<h1>静夜诗</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋两双,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>
HTML的主要作用:
设计网页的基础,HTML5
HTML语法规范
<!--
1. 上面是一个文档声明
2. 根标签 html
3. html文件主要包含两部分. 头部分和体部分
头部分 : 主要是用来放置一些页面信息
体部分 : 主要来放置我们的HTML页面内容
4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成
5. 标签不区分大小写, 官方建议使用小写
-->
-
文字标签：修改文字的样式
-
<font></font> -
属性：
-
size：文字的大小 取值范围1~7，超出了7，默认还是7
-
color：文字颜色
-
两种表示方式
-
英文单词：red green yellow blue black white
-
应用十六进制数表示 #ffffff ：RGB
- 通过工具实现不同的颜色 #66cc66
-
-
-
-
-
注释标签
- html的注释：
<！-- html的注释 -->
- html的注释：
-
换行标签
- html的换行：
<br/>
- html的换行：
-
标题标签
<h1></h1> <h2></h2> <h3></h3> …… <h6></h6>- 从h1到h6，大小是依次变小，同时会自动换行
-
水平线标签
-
属性
- size：水平线的粗细 取值范围 1~7
- color：颜色
-
代码
<hr size="5" color="blue"/>
-
列表标签
-
<dl></dl>：表示列表的范围- 在dl里面
<dt></dt>：上层内容 - 在dl里面
<dd></dd>：下层内容
- 在dl里面
-
<ol></ol>：有序列表的范围- 属性 type：设置排序5方式 1(默认) a I
- 在ol的标签里面
<li>具体内容</li>
-
<ul></ul>：表示无序列表的范围 属性 type ：空心圆circle，实心圆disc，实心方块square，默认disc 在ul里面<li></li>
-
-
图像标签（**重点*）
-
<img src="图片的路径"/>-
src：图片的路径
-
width：图片的宽度
-
height：图片的高度
-
alt：图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
- 有些浏览器下不显示（没有效果）
-
-
-
超链接标签（**重点**）
-
链接资源（**重点**）
-
<a href="链接到资源的路径"> 显示在页面上的内容</a>-
href ：链接的资源的地址（默认不填是当前文件夹）
-
target ：设置打开的方式，（默认是在当前页打开）
- _blank ：在一个新窗口打开
- _self ：在当前页打开(默认)
-
-
当超链接不需要到任何的地址，在href里面加#
<a href="#">这是一个超链接，无效果的</a>
-
-
定位资源
- 如果想要定位资源：定义一个位置
<a name="top">顶部</a> - 回到这个位置
<a href="#top">回到顶部</a> - 引入一个标签 pre：原样输出
- 如果想要定位资源：定义一个位置
-
-
表格标签（重要的标签*）
-
可以对数据进行格式化，是数据显示更加清晰
-
<table></table>：表示表格的范围- border：表格线
- bordercolor：表格线的颜色
- cellspacing：单元格之间的距离
- width：表格的宽度
- height：表格的高度
-
在table里面
<tr></tr>-
设置显示方式 align：left（居左）center（居中）right（局右）
- 在tr里面
<td></td>
- 在tr里面
-
设置显示方式 align：left（居左）center（居中）right（局右）
-
-
使用th也可以表示单元格
- 表示可以实现居中和加粗
-
代码
<table border="1" bordercolor="blue" cellspacing="0"> -
画图分析表格的写法
-
首先定义一个表格的范围使用table
-
定义一行使用tr
- 定义一个单元格使用td
-
-
-
操作技巧：
- 首先数有多少行，数每行里面有多少个单元格
-
表格的标题
<caption></caption> -
合并单元格
-
rowspan：跨行
<td rowspan="3">人员信息</td>
-
colspan：跨列
<td colspan="3">人员信息</td>
-
-
-
表单标签（****重要的标签****）
-
可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
-
<form></form>：定义一个表单的范围-
属性
-
action：提交到地址，默认提交到当前页面
-
enctype：一般请求下不需要这个属性，做文件上传时候需要设置这个属性
-
maethod：表单的提交方式
- 常用的有两种 get 和post，默认是get请求
-
面试题目：get和post区别
- 1.get请求地址栏会携带提交的数据，post不会携带（请求体里面）
- 2.get请求安全级别较低，post较高
- 3.get请求数据大小的限制，post没有限制
-
-
-
输入项：可以输入内容或者选择内容的部分
- 大部分的输入项 使用 ：
<input type="输入项的类型"/>
-
*****在输入项里面需要有一个name属性
-
普通输入项：
<input type="text"/> -
密码输入项：
<input type="password"/> -
单选输入项：
<input type="radio"/>- 在里面需要属性 name
- name的属性值必须相同
- 必须有一个value值
-
实现默认选中的属性
checked="checked"
-
复选输入项：
<input type="checkbox"/>- 在里面需要属性 name
- name的属性值必须相同
- 必须有一个value值
-
实现默认选中的属性
checked="checked"
-
文件输入项（上传文件需要）
<input type="file"/>
-
下拉输入项（不是在input标签里面的）
<select name="birth"> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> </select>-
实现默认选中的属性
selected="selected"
-
-
文本域
<textarea cols="10" rows="10"></textarea> -
隐藏项（不会显示在页面上，但是存在于html代码里面）
<input type="hidden"/> -
提交按钮
<input type="submit"/><input type="submit" value="注册"/>- ？输入项name的值=输入的值&
- 参数类似于key-value形式
-
使用图片提交
<input type="image" src="图片路径"/> -
重置按钮 回到输入项的初始状态
<input type="reset"/> -
普通按钮(和js一起使用)
<input type="button" value=""/>
- 大部分的输入项 使用 ：
-
-
案例：使用表单标签实现注册页面
- 使用表格实现页面效果
- 超链接不想要他有效果 href=“#”
- 如果表格里面的单元格没有内容，使用空格作为占位符 ；
- 使用图片提交表单
<input type=“image” src=“图片的路径”/>
-
html中其他常用标签的使用
-
b：加粗
-
s：删除线
-
u：下划线
-
i：斜体
-
pre：原样输出
-
sub：下标（b圆在下）
-
sup：上标（p圆在上）
-
p：段落标签比br标签多一行
-
div：自动换行 ，用来整体的布局。
-
span：在一行显示，用来展示少量信息 。有多少东西就占据多少空间 ，height 和width 对它无用，除非调用style的display转换属性。
-
第一天的很简单 ，多记记标签 就好