html基础

来源：互联网发布：js 定时器方法有参数编辑：程序博客网时间：2024/06/08 01:38

1.认识大前端

前端是将效果图生成网页，利用html+css+js等技术实现的移动端、PC端。

2.认识网页

网页由文字、图片、输入框、视频、音频、超链接等组成的。

web标准 w3c组织（万维网联盟）

html 结构标准

css 表现标准

javascript 行为标准

网页通过浏览器的渲染引擎呈现在我们面前

3.URL地址

url地址就是我们常说的网址

1.浏览器向服务器发送请求（通过http）

2.http协议：超文本传输协议，也就是浏览器和服务器端的网页传输数据的约束和规范

3.url协议：平时我们写的就是url地址规定了url地址的格式

协议规定格式 scheme://host.domain:port/path/filename

scheme:定义因特网服务的类型、常见的就是http

host::定义域主机（http的默认主机是www）

domain:定义因特网域名

prot::定义端口号

path:网页在服务器上的路径

filename:文件名称

4.认识HTML

Hyper Text model language

超文本标记语言

超文本：超链接

html文档结构

<!doctype html> <html> <head> <title></title></head><body></body></html>

html标签分类

单标签 <!doctype html> <hr/>

双标签 <html></html> <head></head> <title></title> <p></p> <h1></h1> <font></font> <strong></strong>

5.标签

单标签

注释标签

换行 <br/>

水平线标签 <hr/>

双标签

段落标签 <p></p>

标题标签 <h1></h1>

文本标签 <font></font>

文本加粗标签 <strong></strong> <b></b>

文本倾斜标签 <em></em> <i></i>

文本删除线标签 <del></del> <s></s>

文本下划线标签 <ins></ins> <u></u>

上标下标 <sub></sub> <sup></sup>

图片标签

6.路径

绝对路径

相对于根目录出发，就是绝对路径。

相对路径

相对于文件自身出发，就是相对路径。

7.超链接

锚链接

定义一个锚点，超链接链到锚点

超链接的优化写法

8.特殊字符

10.列表

无序列表<ul><li></li></ul>

有序列表<ol><li></li></ol>

自定义列表<dl><dt></dt><dd></dd></dl>

11.音乐标签

12.滚动

13.网页头部信息

关键字 <meta name="keywords" content="">

网页描述 <meta name="description" content="">

网页重定向 <meta http-equiv="refresh" content="5; http://www.110.cn">

链接外部样式表 <link rel="stylesheet" href="1.css">

设置icon图标 <link rel="icon" href="favicon.ico">

14.表格

◆属性：

Border=”1” 边框

Width=”500” 宽度

Height=”300” 高

cellspacing=”2” 单元格与单元格的距离

cellpadding=”2” 内容距边框的距离

align=”left | right | center” 如果直接给表格用align=”center” 表格居中如果给tr或者td使用，tr或者td内容居中。

bgcolor=”red” 背景颜色。

◆ 表头 <caption></caption>

◆colspan=”2” 合并同一行上的单元格

◆rowspan=”2” 合并同一列上的单元格

◆表格标题 <th></th>用法和td一样

◆内容垂直对齐方式 Valign=”top | middle | bottom”

15.表单

◆表单域

属性：action:处理信息

Method=”get |post”

Get通过地址栏提供（传输）信息，安全性差。

Post 通过1.php来处理信息，安全性高。

◆文本输入框

maxlength="6" 限制输入字符长度

readonly=”readonly” 将输入框设置为只读状态（不能编辑）

disabled="disabled" 输入框未激活状态

name="username" 输入框的名称

value="大前端" 将输入框的内容传给处理文件

◆密码输入框

<input type="password"

★注意：文本输入框的所有属性对密码输入框都有效。

◆单选框

★只有将name的值设置相同的时候，才能实现单选效果。

★checked=”checked” 设置默认选择项。

◆下拉列表

<option>下拉列表选项</option>

</select>

属性：

Multiple=”multiple” 将下拉列表设置为多选项

Selected=”selected” 设置默认选中项目

<optgroup></optgroup> 对下拉列表进行分组。

Label=”” 分组名称。

◆多选框

Checked=”checked”设置默认选中项

◆多行文本框

Cols 控制输入字符的长度。

Rows 控制输入的行数

◆文件上传控件

◆文件提交按钮

★：可以实现信息提交功能

◆普通按钮

★不能提交信息，配合JS使用。

◆图片按钮

★图片按钮可实现信息提交功能

◆重置按钮

★将信息重置到默认状态

◆表单信息分组

<fieldset></fieldset> 对表单信息分组

<legend></legend> 表单信息分组名称

16.标签的语义化

好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。

标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

标签语义化意义：

1:网页结构合理

2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；

3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）

4:便于团队开发和维护

1：尽可能少的使用无语义的标签div和span；

2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

3：不要使用纯样式标签，如：b、font、u等，改用css设置。

4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；

0 0