认识WEB

“网页”主要是由文字、图像和超链接等元素构成，当然除了这些元素，网页中还可以包括音频、视频以及Flash等。

“浏览器”是网页显示、运行的平台。

“浏览器内核”(排版引擎、解释引擎、渲染引擎)

浏览器内核备注
IETridentIE、猎豹安全、360极速浏览器、百度浏览器
firefoxGecko火狐浏览器内核
Safari]Webkit苹果浏览器内核
chrome/OperaBlinkchrome/operaj浏览器内核。Blink其实是WebKit的分支。

web标准

分为结构标准，表现标准和行为标准

结构标准用于对网页元素进行整理和分类(HTML)

表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)

行为标准用于对网页模型的定义及交互的编写(JavaScript)

一、HTML

1.1、HTML骨架格式

<html> <!-- 页面中最大的标签 根标签 -->
     
    <head> <!-- 头部标签 -->    
        
        <title></title> <!-- 标题标签 -->
        
    </head>
   
    <body> <!-- 文档的主体 -->
        
    </body>
 </html>

1.2、HTML标签关系

嵌套关系 与 并列关系 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。

1.3、文档类型标签

<!DOCTYPE >

「文档类型」用来说明你用的XHTML或者HTML是什么版本。

<!DOCTYPE html>

告诉浏览器按照HTML5标准解析页面。 该标签需放于文档中最前面位置，位于<html>标签前面 同时其不为HTML标签，仅仅只是文档声明标签

1.4、页面语言lang

用来定义文档显示语言 > en 英 > zh-ch 中

1.5、字符集charset

字符集(Character set)是多个字符的集合,计算机要准确的处理各种字符 集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

在<head>标签内，可通过<meta>标签的charset属性规定字符编码<meta charest="UTF-8" /> UTF-8是目前最常用的字符集编码方式

HTML 文件是以 UTF-8 编码保存的， 浏览器根据编码去解码对应的html内容。

二、HTML常用标签

2.1、基本文本标签

  1. 标题标签

    <h1>-<h6>`;作为标题使用 ex：`<h1>这里是一级标题</h1>

  2. 段落标签

    <p>标签用于定义段落，可以把 HTML 文档分割为若干段落

  3. 换行标签

    <br /> (这是一个单标签)

  4. 水平线标签：

    <hr>标签； 用于设置水平线

  5. 文字特殊化标签

    • 加粗：<strong></strong>or<b></b>
    • 倾斜：<em></em> or <i></i>
    • 删除线：<del></del> or <s></s>
    • 下划线：<ins></ins> or <u></u>

2.2、div和span标签

是没有语义的,是我们网页布局最主要的2个盒子。但div是独占一行空间，span是一小块空间

2.3、图像标签

<img src="图像url />"

图片标签的其他属性

属性属性值说明
src图片路径必须属性
alt文本替换文本。图像不能显示的文字
title文本提示文本。鼠标放到图像上显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细
 <img src="picture.jpg（图片路径）" altt="图片没有时显示该行文字" width="200" height="200" border="3" title="这是一张图片" />
  • 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  • 采取 “键值对” 的格式 ，即key=“value” 的格式，属性=“属性值”

2.4、超链接标签

  • <a>标签用于超链接，作用是从一个页面；链接到另一个页面
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

其他：

  • 外部链接： 需要添加 http或 https 链接，如：<a href="https://www.baidu.com">首页</a>
  • 内部链接： 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a>
  • 空链接：如果暂时无确定链接目标时，<a href="#">首页</a>
  • 下载链接：如果href里面的地址是一个文件或压缩包时，会下载该文件
  • 网页图片元素链接：在网页中的各种网页元素，如文本 表格 图像，均可添加超链接
  • 锚点链接：即“目录”，可跳到当前页面的指定位置
1. 使用相应的id名标注跳转目标的位置。 (目标)  <h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本（被点击的）  <a href="#two">

2.5、其他特殊标签：

HTML原始码显示结果描述
  不断行的空白符
<<小于号
®>大于号
>®已注册
©©版权
""双引号
  • 重点记住空格、大于号、小于号

2.6、表格标签：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

常用于显示、展示表格式数据

  • <table>用于定义一个表格标签。
  • <tr>标签 用于定义表格中的行，必须嵌套在 <table>标签中。
  • <td> 用于定义表格中的单元格，必须嵌套在<tr>标签中。

  1. 表头单元格标签

    <th>```` 用该标签替换 td 标签，可以达到加粗居中的特点

  2. 表格属性

    表格标签这部分属性我们实际开发我们不常用，后面通过CSS来设置

    | 属性名 | 属性值 | 描述 |
    | :---------- | :------------------- | :----------------------------------------------- |
    | align | left、center、.right | 规定表格相对周围元素的对齐方式。 |
    | border | 1或"" | 规定表格单元是否拥有边框，默认为""，表示设有边框 |
    | cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
    | cellspacing | 像素值 | 规定单元格之间的空白，默认2像素。 |
    | width | 像素值或百分比 | 规定表格的宽度。 |

  3. 表格结构划分 （起分割区域作用)
  • <thead>：用于定义表格的头部。用来放标题之类的东西。其内部必须拥有 <tr> 标签！
  • <tbody>：用于定义表格的主体。放数据本体：用于定义表格的主体。放数据本体
  • <tfoot>用于放表格的脚注之类。
  • 以上标签都是放到table标签中。

  1. 合并单元格

    • 分为跨行合并和跨列合并

      1. 跨行合并：rowspan=“合并单元格的个数”
      2. 跨列合并：colspan=“合并单元格的个数”

​ 合并的顺序我们按照 “先上后下” “先左后右” 的顺序 ,找到目标单元格后写上合并方式=合并单元格数量。比如：

<td colspan="2"></td>
  • 合并完之后需要删除多余的单元格

2.7、列表标签

  1. 无序标签🔺

    <ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li> 标签定义。

<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ......
</ul
  • 每一个列表没有先后顺序,是并列的。
  • <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
  • <li>与</li>之间相当于一个容器，可以容纳所有元素。
  1. 有序标签

在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用<li> 标签来定义列表项。

<ol type="A"> 
  <li>列表一</li>
  <li>列表二</li>
  <li>列表三</li>
</ol>
  • <ol>标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
  • 常用的type属性值分别为是1，a，A，i，I
  • <ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。
  • <ol start="2">中的start属性值为2，有序列表中的第一个序列号将从2开始排列。
  1. 自定义列表🔺

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>
  • <dl></dl>里面只能包含<dt> 和 <dd>。
  • <dt>和<dd>个数没有限制，经常是一个<dt> 对应多个<dd>。
标签名定义说明
<ul></ul>无序标签里面只能包含li,没有顺序，使用较多。li里面可以包含任何标签
<ol></ol>有序标签里面只能包含li,有顺序,使用相对较少。li里面可以包含任何标签
<dl></dl>自定义列表里面只能包含dt 和 dd 。 dt和dd里面可以放任何标签

2.8、表单标签

在 HTML中，一个完整的表单通常由 表单域 、表单控件（也称为表单元素）和提示信息3个部分构成。

  1. 表单域

表单域是一个包含表单元素的区域。 在 HTML标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器.

<form action="url" method="提交方式" name="表单域名称">各类表单元素控件</form>
属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的ul地址
methodget/post用于设置表单数据的提交方式，其取值为get或post
name名称用于指定表单的名称，以区分同一个页面中的多个表单域
  1. <input>表单元素
  • <input>表单元素用于收集用户信息
   <input type="属性值" />     -----(这是一个单标签)

  • 通过设置不同的type值来指定不同的控件类型

    | 属性值 | 描述 |
    | :------- | :----------------------------------------------------------- |
    | button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
    | checkbox | 定义复选框 |
    | file | 定义输入字段和“浏览”按钮，供文件上传 |
    | hidden | 定义隐藏的字符 |
    | image | 定义图像形式的提交按钮 |
    | password | 定义密码字段。该字段中的字符被掩码 |
    | radio | 定义单选按钮 |
    | reset | 定义重置按钮。重置按钮会清除表单中的所有数据 |
    | submit | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
    | text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符 |

  • 除type属性外，<input>标签还有其他属性：
例如：<input type="~~~" name="~~~" value="~~~">
  1. value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置
  2. name表单的名字,单选按钮和复选框要有相同的name值
  3. name和value是每个表单元素都有的属性值，主要给后台人员使用
  4. checked属性主要针对于单选按钮和复选框，主要作用一打开页面就能够默认选中某个元素

  • 小结

    | 属性 | 说明 | 作用 |
    | :------ | :------- | :----------------------------------------------------- |
    | type | 表单类型 | 用来指定不同的控件类型 |
    | value | 表单值 | 表单里面默认显示的文本 |
    | name | 表单名字 | 页面中的表单很多，name主要作用就是用于区别不同的表单。 |
    | checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |

  1. <label> 标签

<label> 标签为 input元素定义标注（标签）。<label> 标签用于绑定一个表单元素,当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验

例如：<label for="sex">男</ label>
         <input type="radio" name="sex" id="sex" />

<!--关键在于<label>标签的for属性应与相关元素id相同--->
  1. <select>下拉表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表

<select>
  
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>
  • 在option 中定义selected =" selected "时，当前项即为默认选中项。
  • select中至少包含一对option
  1. <textarea>文本域元素
<textarea cols="~~~" rows="~~~" >
         文本内容
  </textarea>
  • cols=“每行中的字符数” rows=“显示的行数”(了解。实际应用中用css去修饰)
  • 通过textarea控件可以轻松地创建多行文本输入框（用于留言板、评论区等）