HTML基础知识点总结

来源：互联网发布：淘宝助理导出宝贝详情编辑：程序博客网时间：2024/04/30 08:55

HTML知识点总结

--------------------------------------------------------------------------------------------------------

Web概念：

1>Web三要素：

- 浏览器：向服务器发起请求，下载服务器中的网页(HTML)，然后执行THML显示出内容。

- 服务器：接收服务器的请求，发送响应的页面到浏览器。

- HTTP协议：浏览器与服务器的通信协议。

2>常用浏览器：IE、Edge、Firefox、Chrome(Opera)、safari。

3>HTML工作原理：

- HTML是部署在服务器上的文本文件；

- 根据HTTP协议，浏览器发出请求给服务器，服务器做出响应，给浏览器返回一个HTML；

- 浏览器解释执行HTML，从而显示内容；

- HTML部署在服务器上，运行在浏览器上。

HTML简介：

1>HTML(HyperText Markup Language)：超文本标记语言，一种纯文本类型的语言；

2>用该语言编写的文件，以.html或者.htm为后缀；

3>由浏览器解释执行；

4>HTML页面上，可以嵌套用脚本语言编写的程序段，如JavaScript；

5>可以理解标签固定的XML；

6>HTML标记通常也被称为HTML标签(HTML tag)；

7>注释语法：<!-- 注释的内容 -->，注释不能嵌套；

8><!DOCTYPE>不是HTML标签，它为浏览器提供一项信息(声明)，即HTML是用什么版本编写的。

<head>元素：

1><head>元素是所有头部元素的容器；

2><head>内的元素可声明元信息，指示浏览器在何处可以找到样式表，包含的脚本等等；

3>这些标签可添加在head部分：<title>、<meta>、<link>、<style>、<script>；

4><title>元素：

- 定义浏览器工具栏中的标题；

- 提供网页被添加到收藏夹时显示的标题；

- 显示在搜索引擎结果中的页面标题。

5><meta>元素：

- 提供关于HTML文档的元数据；

- 元数据不会显示在页面上，但是对于机器是可读的；

- 用于规定页面的描述、关键词、文档作者、最后修改时间，以及其他元素；

- 常用属性有：content、http-equiv、charset。

文本元素：

1>文本元素是网页上的重要组成部分，直接书写的文本会用浏览器默认的样式显示；

2>包含在文本元素中的文本，则会被显示为元素所拥有的样式，文本元素包括：

- 标题元素；

- 段落元素；

- 列表元素；

- 分区元素；

- 行内元素。

标题元素：

1>标题元素让文本以醒目的方式显示，往往用于文章的标题；

2>基本语法：<h#>......</h#>；

- #表示从1、2、3、4、5、6；

- 从<h1>到<h6>，即标题1到标题6。

列表：

1>列表是指将具有相似特性或具有先后顺序的几行文字进行对齐排列；

2>所有的列表都由列表类型和列表项组成：

- 列表类型：有序列表<ol>和无序列表<ul>；

- 列表项：<li>，用于只是具体的列表内容。

3>有序列表：

- <ol>元素编写有序列表，用于列出页面上特定次序的一些项目；

- <ol>元素中也只能包含列表项元素<li>。

4>无序列表：

- <ul>元素表示无序列表，用于列出页面上没有特定次序的一些项目；

- <ul>元素中只能包含具体的列表项元素<li>；

- 列表中包含的每一项都必须包含再起始标记<li>和结束标记</li>之间。

5>列表嵌套：将列表元素嵌套使用，可以创建多层列表。

分区：

1>分区元素用于为元素分组。常用于页面布局；

2>块分区元素：<div></div>；

3>行内分区元素：<span></span>，设置同一行文字内的不同格式；

4>块级元素：

- 默认情况下，块级元素会独占一行，即元素前后都会自动换行；

- 如：<p>、<div>、<hn>。

5>行内元素：

- 不会换行，可以和其他行内元素位于同一行；

- 如：<span>、<a>。

行内元素：

1><span>元素是内联元素，可用作文本的容器；

2><span>元素也没有特定的含义，当与CSS一同使用时，<span>元素可用于为部分文本设置样式属性；

3><i>元素用来定义斜体字；

4><em>元素用来定义着重文字；

5><b>元素用来定义粗体文字；

6><strong>元素用来定义加重文字；

7><del>元素用来定义带删除线的文字；

8><u>元素用来定义带下划线的文字；

9>空格折叠：默认情况下，HTML中多格空格、多个制表符、多个换行符会压缩成单个空格，即只显示一个空格；

10>使用<br>元素再任何地方创建手工换行；

11>小于号：&lt；大于号：&gt；空格：&nbsp。

图像和超链接：

1>使用<img>元素将图像添加到页面，src是必须属性；

2>使用<a>元素创建一个超链接，语法是：<a href="" target="">文本</a>：

- href属性：连接url；

- target属性：目标打开方式，可取值为_blank、_self等。

3>锚点：

- 锚点是文档中某行的一个记号，用于链接到文档中的某个位置；

- 定义锚点：<a name="anchorname">锚点</a>；

- 链接到的锚点：在冒点名前加上#，<a href="#anchorname“>回到锚点</a>。

表格：

1>表格的作用：

- 表格通常用来组织结构化的信息；

- 表格是一些被称作单元格的矩形框按照从左到右，从上到下的顺序排列在一起而形成的；

- 表格的数据存放在单元格里。

2>创建表格：

- 定义表格：使用成对的<table></table>标记；

- 创建行：使用成对<tr></tr>标记；

- 创建列：使用成对<td></td>标记。

3><table>元素：

- border;

- width/height;

- align;

- cellpadding：单元格边框与内容之间的边距；

- cellspacing：单元格之间的间距。

4><tr>元素：

- align/valign；

5><td>元素：

- align；

valign；

width/height；

colspan：使当前单元格沿着水平方向延伸，值为正整数，代表此单元格水平延伸的单元格数；

rowspan：使当前单元格沿着垂直方向延伸，值为正整数，代表此单元格垂直延伸的单元格数；

6>行分组：

- 表格可划分为3个部分：表头、表主体和表尾；

- 表头行分组：<thead></thead>；

- 表主体行分组：<tbody></tbody>；

- 表尾行分组：<tfoot></tfoot>。

表单：

1>表单是用于显示、收集信息，并提交信息到服务器；

2>表单二要素：form元素、表单控件；

3>表单是从浏览器向服务器传输数据的手段；

4>定义表单：使用成对的<form></form>标记，表示要将此元素中所涵盖的控件中的数据传输给服务器；

5>主要属性：

- action：表单提交的url；

- method：指出表单数据提交的方式；

- enctype：表单数据进行编码的方式。

6>表单控件：

- 表单可以包含很多不同类型的表单控件；

- 表单控件是一种HTML元素，是信息输入项；

7>表单控件包括：

- input元素：文本框、密码框、单选框、复选框、按钮、隐藏域、文件选择框；

- 其他元素：标签、文本域、下拉选。

8>文本框：<input type="text"/>

9>密码框：<input type="password"/>

10>单选框：<input type="radio"/>

11>复选框：<input type="checkbox"/>

12>提交按钮：<input type="submit"/>

13>重置按钮：<input type="reset"/>

14>普通按钮：<input type="button"/>

15>隐藏域：<input type="hidden"/>

16>文件选择框：<input type="file"/>

17>文本域：相当于多行文本框，语法<textarea></textarea>

18>下拉选：下拉选择内容，语法：

<select>

<option value="1">Java</option>

<option value="2">PHP</option>

<option value="3">Android</option>

</select>

19>标签：表单中的文本，用于给控件设置显示名称，语法：<label for="控件ID">文本</label>，for设置该文本所关联的控件ID，关联后点击标签等同于点击控件。

--------------------------------------------------------------------------------------------------------

0 0