【HTML】超基础, 你掌握全了吗?

178 阅读4分钟

HTML(Hyper Text Markup Language)超文本标签语言。

浏览器内核

  • Trident: IE
  • EdgeHtml: Edge
  • Gecko: FireFox
  • webkit: Safari
  • Blink: Chrome

web标准

由W3C和其他标准化组织制定的一系列标准。HTML+ CSS + JS

  • 结构层 (内容)
  • 表现层 (外观)
  • 行为层 (交互)

标签

1. 标签分类:

  • 双标签 < xx ></ xx >
  • 单标签 < xx />

2. 语义化标签

直白点解释,一看上去就知道哪个是重点,结构是什么,知道每块是干什么的。

  • 便于SEO;
  • 便于修改维护代码;

3. 标签

3.1 meta标签

元数据(Metadata)是数据的数据信息。 <meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端,但是会被浏览器解析。 META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者及其他元数据。 元数据可以被使用浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 Web 服务调用。

image.png

3.1.1 文档类型字符集

文档类型配置,于html文档的最前面,向浏览器说明使用哪种HTML规范

< meta charset="UTF-8" />

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="UTF-8" />
    </head>
...

常用的字符集有utf-8,gbk(全部中文,简繁),gb2312(简体中文)

3.2 常用标签

3.2.1 排版标签

  1. 标题标签 hx html提供6级标签 < h1> ... < h6>

  2. 段落标签 p < p> </ p> 文本在一个段落中会根据浏览器窗口的大小,自动换行。一行只能放一个

  3. 水平线标签 hr < hr/>

  4. 换行标签 br < br/>

  5. div、span标签 span: inline,一行可以放多个 div: block,一行只能放一个

3.2.2 文本格式化标签

  1. 加粗
<strong></strong>   <b></b>

<strong>是标明重点内容,有语气加强的含义,使用阅读设备时,会重读,<b>是展示强调内容

  1. 斜体
<em></em>           <i></i>
  1. 删除线
<del></del>         <s></s>
  1. 下划线
<ins></ins>         <u></u>

3.2.3 图像标签

<img src="图片URL"/>
属性:
(1)src 图像的路径 (2)alt 图像不能显示时的替换文本 (3)title 鼠标悬停时显示内容 (4)width & height,设置一项自动缩放

3.2.4 链接标签 anchor

<a href="目标跳转链接", target="目标窗口的弹出方式"> </a> 属性:
(1) href 用于指定链接目标的url地址
可以是:

  • 外部链接
  • 本地链接

指定下列值则不跳转

  • "#"
  • "javascript: undefined"
  • "javascript: void(0)"
  • "javascript:;" (2) target 用于指定目标窗口的弹出方式
  • _self 在当前窗口打开
  • _blank 新窗口中打开

image.png

image.png

3.2.5 特殊符号标签

空格  
< <
> &rt;
& &

3.2.6 注释标签

<!-- xxxxx -->

3.2.7 列表标签

  • 无序列表 ul 注意:li: { list-style: none} //可以取消前面的小点

image.png

  • 有序列表 ol 每一条会标记序号。

image.png

type:设置项目符号 取值1(默认)a A i I;
start: 从第几个开始 取值number(数字);
reversed=“reversed” 当属性和属性值相同,可以简写为属性 ,倒序;

  • 自定义列表

image.png

3.2.8 表格标签

一个简单的表格

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

< table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行;th 元素定义表头,会自动加粗居中;td 元素定义表格单元;caption 定义表格标题,紧挨table标签,只能对每个表格定义一个标题; thead``tbody 定义表格结构;

image.png 更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

table属性

  • border
  • width
  • height
  • align 设置表格在页面中的水平对齐方式,left、right、center,也适用于tr、td
  • cellspacing 设置单元格与单元格之间的空白间距(默认2)
  • cellpadding 设置单元格内容与单元格边框之间的空白间距(默认1)

合并单元格: 规则,自上而下,从左向右合并 td属性

  • colspan 跨列合并
  • rowspan 跨行合并

image.png

3.2.8 表单标签

完整的表单有表单控件、提示信息、表单域组成。

  • input
type:
1) text     单行输入框
2) password 密码输入框
3) radio    单选按钮 (如果是一组必须命名相同名字)
4) checkbox 复选按钮
5) submit   普通按钮
6) reset    重置按钮
7) image    图像
8) file     文件域
name       控件名称(组)
value      控件中默认值
checked    选中项
maxlenth   控件允许输入的最多字符数
  • label 一个单元格中有文字有控件框,要用label标签包裹起来m

< label> 用户名< input type="text"/> </ label>

另一种用法,点击label名称,光标自动定位到后面输入框中。

< label for="abc" > male < /label>
< input type="text" value="male" id="abc" />

  • textarea

< textarea cols="5" rows="25" > </ textarea>

  • select
<select> 
    <option>option1</option>
    <option selected="selected">option2</option>
</select>

加上multiple属性即可为多选

  • form表单域

image.png

3.2.8 H5语义化标签

image.png

image.png

image.png

image.png