web前端day01-HTML复习笔记

HTML（Hyper Text Markup Language）超文本标记语言。

超文本：比普通文本强大，超出普通文本的功能，比如可以在超文本中加入视频，图片，音频等.....。(超越了普通文本)

标记语言：通过一套标签来描述页面的语言，这些标签是可以直接被浏览器解析的。例如<font color=”red”>我是红色字体</font>

html文件的扩展名：.html或.htm。(以前文件的扩展名只能有三位,所以不得不写为htm)

html不是一门编程语言，只是一个文档标记。

html文件的传输基于http协议。

在开发中，主要使用html技术制作静态页面(下面是它的一个基本框架)

<html> 根标签：声明当前是一个html文件

<head></head> 头标签：定义当前html文档的重要信息，比如标题，编码等

<body> 体标签：用于在浏览器展示的内容

Hello world

</body>

</html>

编写html文档的注意事项：

1.html标签有属性：格式为 key="值" 多个属性之间用空格分割

2.html只支持正确的嵌套关系

3.围堵标签：标签有开始有结束 <html>标签体</html>

4.空标签：没有标签体的标签

5.HTML不缺分大小写

常用浏览器：

火狐（firefox）、Google（chrome）、IE

Head中常见的标签：

title 文件的标题

meta 用来描述html文档的属性

script 编写或者导入js代码或文件

style 编写或者导入css代码或文件

...

1.meta标签:

设置浏览器用utf-8字符集查看当前网页

1. <meta charset=utf-8"/>

设置搜索关键字（搜索引擎优化）

2. <meta name="key words" content="京东，电商购物" />

网页描述

3. <meta name="description" content="京东是国内最大的……" />

自动刷新，3秒后自动跳转到www.baidu.com(equiv是期限的意思)

4. <meta http-equiv="refresh" content="3;url=www.baidu.com" />

设置浏览器不缓存当前页面(这个设置没什么卵用,浏览器照样还是会缓存)

5.<meta http-equiv="pragma" content="no-cache">

2.script标签

作用：在页面中编写javascript代码或引入javacript文件后续讲解

3.style 标签

作用：在页面中编写css代码后续讲解

4.link标签

作用：引入其他文件(例如css文件) 后续讲解

body中的标签

分类：

块级标签：一个标签独占一行

行级标签：一个标签不会独占一行

标题标签 h1...h6

标题标签：

hx x数字当前标题的大小

x的取值范围：1~6

特点：

从1到6 字体变小

若超出最大范围使用默认字体大小

标题标签独占一行

水平线 hr

hr常用属性：

hr 水平线标签空标签

属性：

size：水平线的粗细

1~7

特点：逐渐变粗

width：水平线的长短

px：像素

%：百分比

color：水平线的颜色

red：英文单词

十六进制：#ff00ff

加粗和斜体 strong、b、i

div标签

作用：独占一行的效果，div+css做页面布局

注意：style不是必须加的，style是后续学习内容，只为看到当前div效果

注释和特殊符号

空格
大于号(>)	>
小于号(<)	<
引号(")	"
版权符号©	©

span标签 font标签

示例代码：

<span style="background-color: red;">中公优就业</span>

示例代码：

font常用属性:

color：字体的颜色

取值：十六进制 #ff00ff

英文字母 red

size:字体大小

取值：1~7

特点：字体变大

超链接a:

示例代码:

<body>

</body>

属性说明：

a 超链接标签

属性：

href：跳转路径

相对路径

./本页面同级别的路径

../本文件上一级别的路径

绝对路径

带有http和主机名结合在一起的路径

target:跳转的方式

_self 自身打开

_blank 其他标签页打开

图像标签 img

示例代码：

<body>

<img src="../img/small03.jpg"

title="鼠标停在图片上时提示的文字内容"

alt="图片路径不存在加载我"

border="5px"

width="200px"

height="200px"/>

</body>

img常用属性：

img 图片标签空标签

src：连接图片的地址

相对路径：

./ 获取同级别目录的资源文件

../ 获取上一级别目录的资源文件

绝对路径：

以http和主机名结合在一起使用的路径

width:宽度

height:高度

border:边框

title="鼠标停在图片上时提示的文字内容"

alt:图片路径不存在时显示提示信息

列表标签

列表的种类：

无序列表

有序列表

定义列表

无序列表（unordered list）

示例代码：

</ul>

有序列表（ordered list）

示例代码：

</ol>

ul 无序标签

ol 有序标签

共同的子标签：

li列表项

共有的属性：

type:标识的类型

ul：

实心圆 disc

空心圆 circle

实心方块 square

ol：

定义列表（define list）

<dl>

<dd>计算机应用</dd>

<dd>计算机软件工程</dd>

</dl>

表格 table

表格的作用，整齐，清晰明了的展示数据。

表格的几个名词：行 row ，列 column ，单元格 cell

基本语法

示例代码：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<th>定义表头

<tr> 定义行

<td> 定义列

table常用属性：

表格标签：table

属性：

border：边框

width：宽度

height：高度

align:对其方式

bgcolor：背景颜色

cellpadding 单元格中包含数据距离单元格边框的距离

cellspacing 单元格边框之间或单元格边框和表格边框之间的距离

子标签：

tr 行标签

子标签：

td：列标签

属性：

跨行合并：rowspan 列不动行动

跨列合并：colspan 行不动列动

th：表头标签

区别：th居中加粗

跨行和跨列

跨列（合并列） td的colspan 属性

示例代码：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

练习：同时跨行和跨列

web前端day01-HTML复习笔记

表单标签(收集数据的标签)

作用：收集数据。例如：注册、登录等操作时需要收集用户填写的数据。

子标签：输入框（input）

单行文本框

在输入框内的数据可见

密码框

在输入框内的数据以密文展示

单选按钮

<input type=”radio” />男

<input type=”radio” /> 女

多个单选框只能点选其中之一

复选框

<input type=”checkebox”/>体育

<input type=”checkebox”/>音乐

<input type=”checkebox”/>艺术

可以点选多个选项

文件框

选择本地文件

隐藏域

隐藏域不会显示在页面上

普通按钮

普通按钮不会提交整个表单数据，需要结合js使用

提交按钮

可以提交整个表单的数据到指定服务器

重置按钮

具有重置表单功能

图片提交按钮

和<img src=””/>标签功能相同，可以在页面中引入图片。不同是，和 submit一样，具有提交表单的能力

子标签：文本域（textarea）

<textarea >显示在页面上的内容</textarea>

常用属性：取值为数字

cols：可见列宽
rows：可见行数

子标签：下拉列表框（select）

</select>

multiple=”multiple“ 把列表框设置为可以多选（按住ctrl或shift）

</select>

form表单属性说明：表单标签

说明：以上所有收集数据的标签都要放在<form></form> 标签中才能提交给后台代码。

属性说明：

action 表单提交路径
method 表单提交方式，get和post

get:会把参数拼接到url地址栏后面显示，并且对传递的参数大小有限制

post:参数不会显示在url地址栏后面，而是存放在http请求体中，并且对传递参数大小无限制

属性 readonly属性 disabled属性

id属性： html页面中的所有标签都有id属性。

建议：同一页面中的所有标签的id属性值都要唯一

readonly 属性：用来将标签设置为只读（不能修改内容）

disabled 属性：将标签设置为不可用（不能修改内容）

区别：

disabled 提交表单时不会把数据传递到后台，并且表单置灰，而readonly不会置灰可以把数据提交到后台

form表单默认值设置

若为文本输入框和密码输入框设置value属性即可

若为单选输入框或复选输入框设置checked="checked" 或者简写为checked

若为下拉选设置selected="selected" 或者简写为 selected

若为文本域直接在标签体中设置默认值即可

(最好全部设置name属性和value属性,其中需要选择一项或多项的name属性要设置为一样.不然毫无效果.)

示例代码：

<body>

姓名:<input type="text" name="username" value="于谦"/><br />

密码:<input type="password" name="password" value="123456"/><br />

性别:<input type="radio" name="sex" value="1" checked="checked"/>男

爱好：<input type="checkbox" name="hobby" value="smoking"/>抽烟

<input type="checkbox" name="hobby" value="drink" checked/>喝酒

头像:<input type="file" name="fileName"/><br />

生日：<input type="date" name="birthday"/><br />

省份：<select name="pro">

</select>

城市：<select name="city">

</select>

<br />

介绍：<textarea cols="100" name="jj" rows="5">我是默认值</textarea><br />

</form>

</body>

web前端day01-HTML复习笔记

表格 table

跨行和跨列

相关推荐