HTML知识点梳理（详细整理版）

2019-04-22 本文已影响91人因为你就是我的杯子

一.HTML文档基本结构

   <!DOCTYPE html>
     <html>
        <head>
          <title>
          </title>
       </head>
       <body>
      </body>
   </html>

二.常用HTML标签（元素）

文本标签：(<h1>—<h6>)标题大小、<i>标签、<p文>本段落、<span>文本容器、<br>换行符、
链接标签：<a href="_url_" name="_锚_" target="_blank(_跳转到新的标签页_)">https://www.baidu.com</a>
图像标签：<img src="_url_" alt="_替代文本(属性)_">
表格标签：boder为表格边框属性，一个表格可以thead、thbody甚至tfoot构成

<table border="1">
  <caption>表格标题</caption>
  <thead>
    <tr>
      <th>row 0, cell 1</th>
      <th>row 0, cell 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row 1, cell 1</td>
      <td>row 1, cell 2</td>
    </tr>
    <tr>
      <td>row 2, cell 1</td>
      <td>row 2, cell 2</td>
    </tr>
    <tr>
      <td>row 3, cell 1</td>
      <td>row 3, cell 2</td>
    </tr>
  </tbody>
  <tfoot>
  <tr>
      <td>row 4, cell 1</td>
      <td>row 4, cell 2</td>
    </tr>
  </tfoot>
  </table>

表格标签.png

列表标签:(列表可以层层嵌套，列表子标签可以嵌套其他的标签元素)、

有序列表

<ol>
  <li>Coffee</li>
  <li>Milk</li>
</ol>

无序列表

<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

自定义列表

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

格式化标签：

HTML文本格式化标签.png
计算机输出标签：

HTML计算机输出标签.png
引用标签：

HTML引用标签.png
头部标签：

HTML头部标签.png

三.常用HTML属性

背景颜色（Bgcolor）：颜色不同书写方式；六进制数、RGB 值或颜色名
```
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black"> 
```
背景（Background）
```
<body background="_url_">
```
边框（border）：多用于表格

样式（style）:设置width、height、color、background-color等属性值

<html>
  <body>
    <p style="widht:100px;height:200px;text-align:center;background-color:red;
     font-family:arial;color:red;font-size:20px;">A paragraph.</p>
  </body>
</html>

四.HTML中块级元素和内联元素

块级元素（block element）：<div>, <h1>, <p>, <ul>, <table>等
内联（行类）元素（inline element）:<span>, <b>, <td>, <a>, <img>等

五.HTML的类和id以及css样式以及javaScript脚本引入方式

<html>
  <head>
   //引入css样式的两种方式：<style>标签， <link>标签
   <link rel="stylesheet" type="text/css" href="mystyle.css">
   <style>
     #id{}       
    .class{}      
   </style>     
   </head>
  <body>
    <div id="" class="">
    </div>
  </body>
  <script src="_url_">
  </script>
  <script type="text/javascript">
  </script>   
</html>

六. HTML 表单（此部分内容较多且时刻运用在网页设计中，如下拉列表、输入框、导航栏等，所以单独剃出来详解一下）

<form> 元素：定义 HTML 表单，其属性包含如下：

form属性.png method获取方式.png
<input> 元素：最重要的表单属性，根据 type 属性可以定义多种表单类型 text (文本输入框)、password (密码输入框)、radio (单选框)、checkbox (复选框)、submit (提交按钮)、button (按钮)等。

文本输入框

输入类型：text.png
密码输入框

输入类型：password.png
单选框

输入类型：radio.png
复选框

输入类型：checkbox.png
提交按钮

输入类型：submit.png
一般按钮

输入类型：button.png
HTML5 新增 type 输入类型：

html5输入类型.png

<select> 元素：下拉列表，<option> 表示列表项，添加 selected 属性表示默认首选项。

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
  </select>

select：下拉列表.png

<textarea> 元素: 定义多行输入字段(文本域)，rows、cols定义行和高，内容大于指定区域则出现scroll滚动栏。
```
 <textarea name="message" rows="10" cols="30">
   文字区域......
 </textarea>
```
textarea文本域.png

<button> 元素：定义点击按钮，onclick 属性可以绑定点击事件。

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<fieldset> 元素：组合表单数据，其中 <legend> 元素为 <fieldset> 元素定义标题。

<form action="action_page.php">
   <fieldset>
     <legend>Personal information:</legend>
     First name:<br>
     <input type="text" name="firstname" value="Mickey">
     <br>
     Last name:<br>
     <input type="text" name="lastname" value="Mouse">
     <br><br>
     <input type="submit" value="Submit"></fieldset>
</form>

<datalist> 元素：为 <input> 元素规定预定义选项列表。<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<form action="action_page.php">
   <input list="browsers">
   <datalist id="browsers">
     <option value="Internet Explorer">
     <option value="Firefox">
     <option value="Chrome">
     <option value="Opera">
     <option value="Safari">
   </datalist> 
</form>

datalist预定义选项列表.png