HTML总结

62 阅读 0 评论 41 点赞

我是靠谱客的博主勤奋故事，最近开发中收集的这篇文章主要介绍HTML总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、html标签：对大小写不敏感，但是推荐小写。<br />换行
适用于绝大多数的HTML元素：
属性   值       描述
class   ClassName   规定元素的类名
id   id   规定元素的唯一id
style style—definition   规定元素的行内样式
title   text   规定元素的额外信息（可在工具提示中显示）就是鼠标移上去显示信息
2、HTML标题：通过<h1>-<h6>来定义的
其中<h1>最大 <h6>最小
3、HTML段落
通过<p>标签来定义，注释：浏览器会自动的在段落的前后添加空行，//块级元素

“计算机输出”标签
<code>定义计算机代码
<pre>定义键盘码

HTML注释 
4、css的插入方式

外部样式表
<head>
<link rel ="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表
在<head>
书写CSS代码
</head>

内联样式：
在标签中书写style属性，属性之间用‘；’间隔、
<style>定义样式定义
<link>定义资源引用
<div>定义文档中的节或区域（块级）
<span>定义文档中的行内的小块区域

5、HTML连接（超链接）
可以链接网络上的资源
可以从一张页面跳转到另一张页面
超链接可以是一个字或者是一副图像，点击时，箭头会变为一个小手。
通过<a>标签来创建属性 href-   创建指向另一个文档的连接
       属性name-创建文档内的书签
       属性target-表示连接文档在何处显示，_self在本页面打开 _blank在新页面打开（主要使用这两个）
创建类似于<a href="https://www.baidu.com">访问百度</a>
上面这行代码会把用户带到百度首页 tips：连接文本不一定是文本，图片或者是HTML的其他元素也可以。
定义书签-name属性
首先创建书签
<a href="https://www.baidu.com" name="addr">访问百度</a>//name属性课以用id来替代
然后创建指向该书签的链接
<a href="#addr" >shuqian</a>

6、定义HTML图像
img标签的使用 <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
在页面上显示，需要使用源属性（source）src，它的值是URL地址，可以是本地，也可是是网络上的资源
<img src="./time.jpg" alt="beauty"> Alt属性表示的是当浏览器无法载入图像的时候，所显示的文本信息。

7、HTML创建表格。
表格由 <table> 标签来定义。
一行由<tr> 标签定义，每行被分割为若干单元格（由 <td> 标签定义）tabledata
注释：单元格的内容可以包含|文本、图片、列表、段落、表单、水平线、表格等。
若不定义边框，则在table标签中可以不写border属性。定义表头用<th>tableHeading</th>
空单元格建议用&nbsp来占位
横跨行和列横跨行用rowspan属性，值为横跨的数目，横跨列用colspan 建议横跨之间规划好表格！

8、有序列表和无序列表
   有序列表前面有黑色小点，CSS可以调整样式
   <ul>
   <li>Coffee</li>
   <li>Milk</li>
   </ul>
   有序列表使用数字标记，CSS可以调整不同的样式，例如罗马数字，字母等。
   <ol>
   <li>Coffee</li>
   <li>Milk</li>
   </ol>

列表项内部可以使用段落，换行符，图片，连接以及其他列表等。。。
也可以自定义列表。。。

9、HTML块级元素
大多数HTML元素被定义为块级元素（block level element）或内联元素（inline element）。

块级元素在浏览器显示时，通常会以新行来开始（和结束）例如：<h1>, <p>, <ul>, <table>
   HTML中<div>元素是块级元素，他是可用于组合其他HTML元素的容器。
   div没有语义，和CSS一同使用，可以对大块的内容设置样式属性。
内联元素在显示的时候，通常不会以新行开始。例如：<a>, <img>
   HTML中的<span>元素是内联元素，可以作文本的容器、没有特定含义，与CSS一同使用，可为部分文本设置样式属性。

10，布局
   使用div元素的布局
   HTML5提供的新语义标签
header   定义文档或节的页眉
nav   定义导航链接的容器
section   定义文档中的节
article   定义独立的自包含文章
aside   定义内容之外的内容（比如侧栏）
footer   定义文档或节的页脚
details   定义额外的细节
summary   定义 details 元素的标题相当于一个加了特殊含义的div，在进行CSS样式设计的时候，直接用语义标签定义即可

11，响应式设计。
建议直接使用bootstrap框架。

12，HTML框架
使用框架，你可以在同一个浏览器窗口中，显示不止一个窗口。
   建议通过w3c了解一下。
13，HTML背景。
   <body> 拥有两个配置背景的标签。背景可以是颜色或者图像。
   背景颜色（Bgcolor）
   背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
   背景（Background）
   背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复。
已经废除，建议在CSS中定义！
背景图片tips：图像文件不应该超过10K；图像是否与内容搭配好；平铺后，看上去行吗？

14，HTML脚本。
<script> 标签用于定义客户端脚本，比如 JavaScript。
可以包含脚本语言，也可以通过SRC属性引用外部脚本文件。
JavaScript最常用于图片操作，表单验证以及内容动态更新。
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

15，HTML文件路径
   文件路径在链接外部文件时会被用到！网页，图像，样式表，JavaScript
相对路径（强烈建议使用）
   SRC中 /picture.jpg or ./picture.jpg or picture.jpg表示当前根目录下的资源
       ../表示上一文件夹
       /image/picture.jpg表示当前根目录下的image文件夹中的资源。
绝对路径：指向因特网文件的完整的URL

16，HTML中的head头部，及 HTML中的有用的字符实体
   建议看w3c
17，HTML统一资源定位符
   URL也被称为网址，可以由单词组成，例如“w3cschool.com.cn”或者是因特网的协议（IP）地址192.168.1.253。我们通常用域名，比数字更好记忆。
   URL-Uniform Resource Locator (统一资源定位符)
点击某个链接时，对应的a标签对应网络上的一个地址，URL用于定位网络上的数据。
网址： http://www.w3school.com.cn/html/index.asp 遵守以下规则
scheme://host.domain:port/path/filename
scheme表示因特网的服务类型，常见http
host定义域主机
domain定义因特网域名
：port定义主机的端口号，http默认端口号是80
path定义服务器上的路径，（若省略，则文档必须在网站的根目录下）
filename定义文档，资源的名称。

常见的schemes
http超文本传输协议以其开头，不加密
https安全超文本传输协议安全网页，加密所有信息。
ftp文件传输协议用于将文件下载或传至网站
file 本计算机上的文件

URL编码，必须是ASCII编码，通常URL包含很多字符，都必须转成有效的ASCII码

18，HTML的颜色
十六进制值表示。可以通过网上查阅

19，HTML表单
   HTML表单用于收集用户输入
   <form></form>定义表单
   HTML表单中包含表单元素 <input>元素是重要的表单元素，input有很多形态，根据
   不同的type属性。 text 定义常规文本输入 radio 定义单选按钮输入 submit 定义提交表单
   name属性，后端接受请求数据的时候会用到，若要正确的提交，必须设置。定义radio的时候，要加上value值。

   action属性。在提交表单的时候执行的动作，通常，会被提交到web服务器上的网页，如果省略，action将会设置为当前页面。
   method属性，get（默认方法） or post
           get适合少量数据提交，表单数据在浏览器地址栏可见，
           post安全性较好，可以提交敏感数据，如账号密码等。。。
   使用<fieldset>组合表单数据。表单被边框所包围
   <legend></legend>标签定义表单的标题

   form属性的列表。
   action method name target（默认_self) novalidate 规定浏览器不验证表单。
   form表单的enctype属性，规定在发送到服务器之前如何对表单进行数据编码

20、HTML表单元素
   <input> 最终要的表单元素，根据不同的type属性，可以变化多种形态
   <select>（下拉列表）定义name属性   <option>定义选项，
   <textarea name= ;rows= ;cols=;>定义多行输入字段，文本域
   <button>
   html5新元素<datalist>通过该标签设置预定值的input元素,<option>定义选项，input元素的id，必须引用datalist的id
21、HTML输入类型<input>标签type属性
   text定义文本单行输入
   password定义密码字段
   submit定义提交表单至表单程序的处理
   radio，定义单选按钮
   checkbox定义复选框
   button定义button按钮
   number定义数字值的输入，浏览器会约束，可定义max，min
   输入限制：常用的一些输入限制
   image   定义图像形式的提交按钮。
   reset   定义重置按钮。重置按钮会清除表单中的所有数据。
22、HTML input属性
   value 规定输入字段的初始值
   readonly 规定字段为只读（不可修改）该属性不需要值。。。
   disabled 属性规定字段是禁用的（不可用，不可点击，不会提交）该属性不需要值。。。
   size 属性规定输入字段的尺寸（以字符计）
   maxsize属性规定输入字段的最大长度。
   autocomplete属性规定表单或输入字段是否应该自动完成？？？
   novalidate属性，属于form属性，规定提交表单时，不对表单进行数据验证
   autofocus 属性是布尔类型，规定打开页面时，是否自动获得焦点。
   form属性，可以不再同一个<form>标签内，但需要同一个id值
   formaction属性，规定提交表单处理输入控件的URL，例如可以有两个不同submit按钮，向不同地址提交数据，而不是action中的属性

   formenctype 第二个提交按钮的表单数据
   formmethod 第二个按钮的发送方法
   formtarget 第二种target方法，在self 或者 blank
   heigh and weight 定义input元素的宽or高（在type=image有效）
   max min 定义元素的最大值和最小值
   pattern 用于检查input元素值的正则表达式
   placeholder 规定描述输入字段的预期值
   required 布尔类型，表示提交时必须填值！

23，HTML5-----最新标准，无需插件，跨平台。。。
   定义了8个语义HTML元素，且都是块级元素（老的浏览器中，设定为block确保正常）例如
       header, section, footer, aside, nav, main, article, figure {
       display: block;
       }

   还有很多。。。
24，HTML5 API
   地理定位，
   拖放
   HTML本地存储，优于cookie
   应用程序缓存，意味这可以离线访问，本地缓存！