01-HTML

港控/mmm° 2022-05-26 10:47 150阅读 0赞

### 1、介绍 ###

**HTML**

超文本标记语言，作用：展示  
超文本：超越了一般的文本，描述文本的字体、颜色、图片  
标签：标记  
书写规则：

*  文件的后缀名：`.html`（建议）或者`.htm`；
 *  标签必须用`<>`引起来，已经已经定义好的标签
 *  属性：  
    
    
     *  格式：key=“value”，建议属性值用引号引起来
     *  不区分大小写

注意：

*  最好将所有的内容放在一个标签中 `<html></html>`
 *  有开始标签和结束标签的标签称之为围堵标签
 *  没有结束的标签的称之为空标签 `<br/>`
 *  开始标签和结束标签之间的内容称之为标签体.
 *  `` html页面中的注释
 *  标签必须正常嵌套
 *  标签最好关闭

### 2、标签 ###

**文件标签：**

`html` 标签：声明当前网页为 html 页面。  
子标签：

*  `head`：用来存放当前页面的重要信息,一般不展示在html页面上，其常见的子标签：`<title></title>`——>为网页的标题
 *  `body`：要展示的数据放在 body 中。

**标题标签：**

`<hn><hn>` n 取值：1~6，h1最大，h6最小，自动换行，且留白，默认加粗  
常用属性：

*  `align`：对齐方式。left 左，right 右，center 居中，eg： `<h2 align="center"></h2>`

**字体标签：**

*  `h1~h6` 标题
 *  `font` 字体，常用属性： face 字体，size 尺寸，color 颜色
 *  `b`、`strong` 文字加粗，eg：`<b>哈哈</b>`
 *  `i` 文字斜体，eg：`<i>斜了</i>`

**水平线：** `<hr/>`

**换行：** `<br/>`

**颜色的取值：** （RGB）

*  方式1：\#xxxxxx x为16进制 eg：`#acfdff`
 *  方式2：英文单词 eg：`red`

**图片：★**

`<img src="图片的路径" alt="替代文字" width="" height=""/>`  
路径的写法：

*  相对路径：./ 或者 什么都不写 当前目录；../ 上一级目录
 *  绝对路径(常用)：`http://www.baidu.com/xx`

**超链接：★**

`<a href="跳转的路径" target="在什么地方打开"></a>`

**表格标签：★★**

`td` 重要的属性： colspan 列合并，rowspan 行合并

**列表：**

*  `<ol></ol>`
 *  `<ul></ul>`
    
    子标签：列表项 `<li></li>`

**form 表单标签：★★★**

常用属性：action 提交的路径，method 提交的方式(get和post)  
常用子标签：

*  `input`
 *  `select`
 *  `textarea`

▶ 先详细介绍 `input` 标签  
常用属性有：

*  type（分3组）： （text 文本框、password 密码、radio 单选框、checkbox 多选框、file 文件框）；（submit 提交、reset 重置、button 普通按钮）；（hidden 隐藏域、image 图片提交）
 *  name：要想将信息提交到服务器必须提供name属性；将单选框和复选框设置成一组
 *  value：text、password 设置默认值；radio、checkbox 设置选中后提交的值；submit、reset、button 给按钮起个显示的名字。

▶ `select`：下拉选

<select name="">
        <option value="">显示的名字</option>
    </select>

▶ `textarea`：文本域

PS：

给单选框多选框设置默认值，设置属性 `checked="checked"`  
给下拉选设置默认值，设置属性 `selected="selected"`  
提交的路径(get) `http://ssdfsdfsfd?key=vaule&key=value` eg：`http://localhost/day/login.jsp?username=tom&password=123`

**框架：（了解）**

`frameset`：规定框架结构，框架集  
常用属性：rows 水平切割，cols 垂直切割  
子标签：`frame`：具体实现  
eg：水平切割 3 份

*  `frame`：常用属性：src 具体展示的网页；name 给当前的 frame 取个名字，方便超链接使用。

**其他：**

`div` 标签：定义 HTML 文档中的一个分隔区块或者一个区域部分。可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。`<div>` 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 `<div>` 固有的唯一格式表现。

<div style="background-color:lightblue">
      <h3>This is a heading</h3>
      <p>This is a paragraph.</p>
    </div>

`span` 标签：`<span>` 标签被用来组合文档中的行内元素。

转义字符：三部分构成 `&实体;`

更多查看：[HTML转义字符][HTML]

`meta`：元信息， `<meta charset="UTF-8">` 指定浏览器用什么编码打开此页面

[HTML]: http://tool.oschina.net/commons?type=2