HTML

时间：2018-10-15 21:38:58 阅读：181 评论：0 收藏：0 [点我收藏+]

前端基础—html

1. 前端是什么？

前端对于网站来说，通常是指网页，网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。

2. web的原理

浏览器地址栏输入URL-->浏览器往服务端发送消息-->服务端接收消息-->服务端回消息（从文件中读取数据）-->浏览器收消息（按照一个约定好的规则展示出来）

3. HTML初识

html语言就是一些特殊的符号，不同的符号有不同的显示效果，相当于是网页的骨架，也就是网页的结构

4. HTML是什么？

全称超文本标记语言；
本质上是浏览器可识别的规则；
是一种标记语言，不是一种编程语言；

5. HTML的基本结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>：声明标签
<html lang="zh-CN"></html>：html标签是网页的根标签，所有的标签全部都要写在这对根标签内，lang表示当前网页显示内容的主要语言，en为英语，zh-CN主要为中文
<meta charset="UTF-8">:
<head></head>:表示头标签，主要定义网页的头部包括文档的标题，还可以引用JS中的脚本，CSS中的格式等。
<title></title>:标签页显示标签，也就是文档的标题标签。
<body></body>:网页文档的主体，包含用户所看到的的所有内容，如：文本，超链接，图片，表格等。

6. 标签的分类

成对出现的标签
- 段落标签：<p></p>
- 标题标签：<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>
- 文本标签：<font size="" color=""></font>
- 文本加粗：<strong></strong> or <b></b>
- 文本倾斜：<em></em> or <i></i>
- 删除线标签：<del></del> or <s></s>
- 下划线标签：<ins></ins> or <u></u>
单个标签
- 注释标签：
- 换行标签：<br> or <br />
- 水平线标签：<hr> or <hr />
标签内的重要属性
- id:定义标签的唯一ID，一个HTML文件中唯一；
- class:为html元素定义一个或多个类名；
- style：规定元素的行内样式。

7. 常用标签

head标签

charset编码

格式：<meta charset="UTF-8">
常用设置：

ASCII/ANSI/Unicode：英语
GBK ：亚洲通用字符集
GB2312：中文简体
Big5 ：台澳港繁体
UTF-8：世界通用字符集

name

关键字
```
<meta name="keywords" content="">
```
作用是告诉搜索引擎站点关键字。SEO优化使用。
网页描述
```
<meta name="discription" content="">
```
作用是告诉搜索引擎站点的主要内容。这个description是给SEO和用户看的。
作者
```
<meta name="author" content="name">
```
告诉搜索引擎制作网页的制作者。

文件检索

<meta name="robots" content="all | none | index | noindex | follow | nofollow">

有时候会有一些站点内容，不希望被 robots 抓取而公开。为了解决这个问题，robots 开发界提供了两个办法：一个是robots.txt，另一个是 robots meta 标签。
其中的属性说明如下：
all：（默认）文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；
nofollow：文件可以被检索，但页面上的链接不可以被查询。

http-equiv 网页重定向
```
<meta http-equiv="reflesh" content="5; http://www.baidu.com">
```
网页自动跳转：网页5秒后跳转到百度首页。
设置 icon 图标
```
<link rel="icon" href="icon文件">
```

body标签

基本标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>

特殊字符

符号	字符代码
空格	`&nvsp;`
<	`<`
>	`>`
&	`&`
￥	`¥`
?	`©`
?	`®`

参考链接：HTML特殊字符编码表

div标签和span标签
- 特点：这两种标签没有默认样式效果，方便后续使用CSS调整样式。
- div和span的区别：
  - div块级标签，标签独占一行；
  - span行内标签也称内联标签，默认都在一行显示。
块级标签和行内标签
- 块级标签：自己独占一行
  - p标签
  - h标签
  - hr标签
  - div标签
- 行内标签：默认在一行显示
  - b标签
  - i标签
  - u标签
  - s标签
  - span标签
- 标签的嵌套
  - p标签不能包含p标签和div标签
  - 块级标签可以包含内联标签

img标签

格式：<img src alt title width height>
参数：

src : 图片的来源（必写属性）
alt : 替换文本 ，图片不显示的时候显示的文字（重要性：1.SEO优化 2.盲人阅读需求）
title : 提示文本，鼠标放到图片上显示的文字
width : 图片宽度
height : 图片高度

PS：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放

a标签
- 格式：<a href title target>填写内容</a>
- 参数：
```
href ：去往的路径、跳转的页面， (必写属性)
title ： 提示文本，鼠标放到链接上显示的文字
target=”_self" （默认值），在自身页面打开（关闭自身页面，打开链接页面）

target=”_blank” 打开新页面，（自身页面不关闭，打开一个新的链接页面）

PS：当 href 的值为 javascript:void(0); 或 javascript:; ，表示超链接不做任何事情，不做任何跳转。
```
- 锚链接
  - 定义：锚链接也称锚点链接，命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，自动跳转到我们设置锚点的位置，类似于我们阅读书籍时的目录页码或章回提示。
    
    锚点链接可以跳转到页面的任何位置。一般用于在页面下面的时候，点击回到最上面。锚点链接的名称可以随意取，只起到标记作用。
  - 其原理是按照标签的id属性来找到标签，从而跳转到对应位置的。
```
<p id="AAA">

</p>
...
<a href="#AAA"></a>   

```
- 空链接
```
<a href="#">空链</a>
```
  PS：空链相当于 #top，实际点击此链接的时候会跳转到页首的位置。
列表
- 无序列表
- ```
<ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
</ul>
```
  - type属性：
    - disc 实心圆点，默认值
    - circle 空心圆点
    - square 实心方块
    - none 无样式
- 有序列表
```
<ol type="1" start="1">
    <li>第一项</li>
    <li>第二项</li>
</ul>
```
  - type属性：
    - 1 数字列表，默认值
    - A 大写字母排序
    - a 小写字母排序
    - I 大写罗马字母排序
    - i 小写罗马字母排序
  - start属性为设置起始值
- 标题列表
```
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>
```

表格

基本格式：

<table width height border cellspacing cellpadding bgcolor align>
    <!--表头-->
    <caption>表名</caption>
    <thead>
        <tr>
            <th></th>
            <th></th>
            <!--th为表格标题，也就是表结构，会自动加粗-->
        </tr>
    </thead>
    <!--表主体-->
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

PS：写 <thead> <tbody> <tfoot>对SEO更好，不写也没问题。

参数

width：宽度
height：高度
border：边框宽度
cellspacing：单元格与单元格的距离
cellpadding：内容距边框的距离
bgcolor：表格背景颜色
align=”left | right | center”
 如果直接给表格用align=”center” 表格居中
 如果给tr或者td使用 ，tr或者td内容居中。

合并单元格

横向合并单元格：<td colspan="num">填写内容</td>

<tr>
  <td colspan="2">Abner</td>
    <!--<td>21</td>-->
</tr>

纵向合并单元格：<td rowspan="num">填写内容</td>

<tr>
    <td>Sunny</td>
    <td rowspan="2">22</td>
</tr>
<tr>
    <td>Marry</td>
    <!--<td>25</td>-->

form标签
- 格式：
```
<from action=‘url‘ method=""></from>
```
  - 主要属性：
    - action负责处理信息，信息提交至指定的web服务器进行处理。
    - method="get|post"
      
      get：通过地址栏提供（传输）信息（可以在地址栏里看到你输入的账号和密码），安全性差。
      
      method:通过文件来处理信息,密码等信息全部会被封装到文件中传输，安全性高。
- label标签
  - 定义：关联标签，遵循PEP8规范每个form标签下的输入，必须关联一个label标签
  - 格式：
```
# 格式一
<label for="usr">用户名：</label>
<input id="usr" type="txt" name="usn">
# 格式二
<label>用户名：
  <input type="txt" name="usn">
</label>
```
  - 属性：for后面的内容是关联的标签的id值
- input标签
  - 分类：
    - 文本输入框txt
      - 格式：
        
        <input type="txt" name maxlength readonly disabled value>
      - 属性：
        
        type：类型，输入的是文本内容 name：输入框的名字 maxlength：限定输入文本长度 readonly：文本框只读 disabled：文本框未激活 value：输入框中的默认内容 placeholder：引导文字，当文本框无文字并且未获取鼠标焦点时显示引导文字，当获取焦点或者输入文字时隐藏引导文字。
        
        例子： <input type="text" name="username" maxlength="12" readonly="readonly" disabled="disabled" value="用户名">
    - 密码输入框password
      - 格式：
        
        <input type="password" name="pwd">
        
        PS：文本输入框的所有属性对密码输入框都有效
    - 日期输入框date
    - 邮箱输入框email
    - 单选框radio
      - 格式：
        
        <input type="radio" name checked>
      - 属性：
        
        checked="checked"作用是设置默认选择项
      PS：当有多个选项时怎么设置只有其中只有被选中？
      
      只有当name的值设置相同时，才可以实现单选的效果。
    - 多选框checkbox
      - 格式：
        
        <input type="checkbox" name checked>
      - checked的作用和单选框相同。
    - 文件上传file
      - 格式：
        
        <input type="file">
    - 图片上传image
      - 格式：
        
        <input type="image" src="图片路径"> # 图片上传可以实现信息提交的功能
    - 普通按钮button
      - 格式：
        
        <input type="button" value="普通按钮">
        
        PS:不能提交信息，一般配合js按钮点击事件使用。
    - 上传按钮submit
      - 格式：
        
        <input type="submit" value="提交按钮">
    - 重置按钮reset
      - 格式：
        
        <input type="reset" value="重制按钮">
- 下拉列表select标签
  - select标签内部包含的是option，需要配置value属性，默认选择select="select"
  - 属性：
```
multiple=”multiple”： 将下拉列表设置为多选
selected=”selected”：设置默认选中项目
<optgroup></optgroup> 对下拉列表进行分组。
Label="分组名称" 分组名称。
```
- 多行文本编辑框textarea标签
  - 属性：
    1. cols：控制输入字符的长度
    2. rows：控制输入字符的行数

HTML

原文：https://www.cnblogs.com/abner28/p/9794844.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

HTML

前端基础—html

1. 前端是什么？

2. web的原理

3. HTML初识

4. HTML是什么？

5. HTML的基本结构

6. 标签的分类

成对出现的标签

单个标签

标签内的重要属性

7. 常用标签

head标签

charset编码

name

http-equiv 网页重定向

设置 icon 图标

body标签

div标签和span标签

块级标签和行内标签

img标签

a标签

列表

表格

form标签