HTML基础知识总结

网页的基本结构

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

html4与html5的区别

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>

网页的基本标签

标题标签

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

段落标签

<p></p>

换行标签

<br />

水平线标签

<hr />

注释

<!-- -->

特殊符号标签

参考w3c标准html符号

图像标签

<img src="图片资源地址" alt="坏图替换文字" title="图片名称">

超链接

普通链接方式

<a href="#" target="_blank"></a>

锚点链接

<div name="abc"></div>
<a href="#abc" target="_self"></a>

功能性链接

<a href="mailto:734048173@qq.com" target="_self">邮件</a>
<a href="https://shang.qq.com/v3/widget.html" target="_self">QQ</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">点我聊天</a>

行内元素与块级元素

行内元素

font - 字体设定(不推荐)；
s - 中划线(不推荐)；
strike - 中划线；
u - 下划线；

<a>标签可定义锚
<abbr>表示一个缩写形式
<acronym>定义只取首字母缩写
<b>字体加粗
<bdo>可覆盖默认的文本方向
<big>大号字体加粗
<br>换行
<cite>引用进行定义
<code>定义计算机代码文本
<dfn>定义一个定义项目
<em>定义为强调的内容
<i>斜体文本效果
<img>向网页中嵌入一幅图像
<input>输入框
<kbd>定义键盘文本
<label>标签为
<input> 元素定义标注（标记）
<q>定义短的引用
<samp>定义样本文本
<select>创建单选或多选菜单
<small>呈现小号字体效果
<span>组合文档中的行内元素   常用内联容器，定义文本内区块；
<strong>语气更强的强调的内容
<sub>定义下标文本
<sup>定义上标文本
<textarea>多行的文本输入控件
<tt>打字机或者等宽的文本效果
<var>定义变量

块级元素

<address>定义地址
<caption>定义表格标题
<dd>定义列表中定义条目
<div>定义文档中的分区或节
<dl>定义列表
<dt>定义列表中的项目
<fieldset>定义一个框架集
<form>创建 HTML 表单
<h1>定义最大的标题
<h2>定义副标题
<h3>定义标题
<h4>定义标题
<h5>定义标题
<h6>定义最小的标题
<hr>创建一条水平线
<legend>元素为 
<fieldset>元素定义标题
<li>标签定义列表项目
<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>定义在脚本未被执行时的替代内容
<ol>定义有序列表
<ul>定义无序列表
<p>标签定义段落
<pre>定义预格式化的文本
<table>标签定义 HTML 表格
<tbody>标签表格主体（正文）
<td>表格中的标准单元格
<tfoot>定义表格的页脚（脚注或表注）
<th>定义表头单元格
<thead>标签定义表格的表头
<tr>定义表格中的行

行内元素与块级元素的转换

css中的dispaly：block；inline-block;inline;

行内元素与块级元素的区别

块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，
一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效
（注意，块级元素设置了width宽度属性后仍然是独占一行的）
块级元素可以设置margin,padding属性
行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

列表

有序列表

适用范围：试卷、问答...

<ol start="5" type="A">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>

无序列表

适用范围:导航、侧边栏

<!--<ul type="disc">-->
<!--<ul type="square">-->
<ul type="circle">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>
type: disc实心圆（默认）   square实心方块    circle 空心圆

自定义列表

适用范围：公司网站底部

<dl>
    <dt>项目</dt>
    <dd>考试系统</dd>
    <dd>学员管理系统</dd>
    <dd>1+x系统</dd>

    <dt>姓名</dt>
    <dd>张三</dd>
    <dd>李四</dd>
    <dd>王五</dd>
</dl>

表格

<table border="1" cellpadding="1" cellspacing="0">
    <thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td rowspan="2">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <!-- <td>2-1</td>  跨行删除-->
        <td colspan="2">2-2</td>
        <!-- <td>2-3</td>  跨列删除-->
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
    </tbody>
</table>
border      规定表格边框的宽度。
cellpadding      规定单元边沿与其内容之间的空白。
cellspacing      规定单元格之间的空白。
td上跨行      rowspan
td上跨列      colspan

媒体元素

<video src="https://haokan.baidu.com/v?vid=5859365343055339736&pd=pcshare" autoplay controls></video>
<audio src="https://music.163.com/outchain/player?type=2&id=176403&auto=1&height=66" autoplay controls></audio>

内联框架

<iframe src="http://lanqiao.cn" frameborder="1" width="200px" height="200px" name="baidu" scrolling="no">百度</iframe>

frameborder  0|1
name  锚点
scrolling yes|no|auto

表单

基础表单

<form action="#" name="formname" method="get">
    <input type="text">
    <input type="hidden">
    <input type="password">
    <input type="search">
    <input type="number">
    <input type="checkbox">
    <input type="date">
    <input type="time">
    <input type="datetime-local">
    <input type="month">
    <input type="week">
    <input type="radio">
    <input type="email">
    <input type="file">
    <input type="range">
    <input type="url">
    <input type="tel">
    <input type="color">
    <select >
        <option value=""></option>
    </select>
    <textarea name="" id="" cols="30" rows="10" maxlength="100" style="resize: none;"></textarea>
    <input type="image">
    <input type="reset" name="" id="">
    <input type="button" value="按钮">
    <input type="submit">
</form>

表单提交方式

本质上是2种提交方式：一种是自定义提交，使用type=submit，另外一种是ajax提交。

<form action='http://www.123.com/postValue' method='post'>
     <input type='text' name='username'/>
     <input type='password' name='password'/>
     <input type='submit' value='登录'/> 
</form>

$('#documentForm').submitForm({
     url:"/Document/SubmitDocumentCreate",
      dataType:"text",
      callback:function(data){
          endFileUpload();
          data=eval("("+data+")");
          alert(data.Content);
          if(data.Result > 0){
               location.href = data.Redirect;
          }
     },
     before:function(){
          startFileUpload();
          var errMsg ="";
     }
}).submit();

$('#ff').form('submit', {
url:...,
onSubmit: function(){
//进行表单验证
//如果返回false阻止提交
},
success:function(data){
alert(data)
}
});

document.getElementById("form").submit();
jquery: $("#form").submit();

表单能够提交并提交成功接收返回数据时建立在http协议的基础上，http的工作原理就是客户端如何向服务器请求数据，服务器如何向浏览器返回数据。
客户端向服务器发送一个请求报文（请求行（请求的方法，URL，协议版本），请求头部，请求体），服务器以一个状态行作为响应。
http请求方法最常用到的是get和post。
get和post异同
1.安全性： get不安全，由于数据传输时数据被放在请求的URL中；post的所有操作对用户来说都是不可见的。
2.传送数据大小：get传送的数据量受URL限制，数据量较小，而post较大。
3.数据集的值限制：get限制form表单的数据集的值必须为ASCII字符，而post支持整个ISO10646字符集。
4.执行效率：get 执行效率比post好，form表单默认get。

form属性说明

1.action属性：表示该form提交的地址，action是1.jsp表示表单数据要提交到1.jsp当中。
2.name属性：表示该表单的名称。
3.method属性：浏览器提交表单的http请求方法，通常我们用到的是get和post方法。
4.target属性：有两个值，_blank表示点击事件跳转到新页面；_self指当前页面跳转。

表单内容数据类型

通过enctype来设置表单内容数据类型，规定在表单发送到服务器前应该用何种方式对表单数据进行编码。
1.application/x-www-form-urlencoded(默认方式)
2.multipart/form-data不对字符进行编码，在使用包含文件上传控件的表单时，必须使用该属性值。它支持文本数据，也支持二进制数据上传，使用此值时，说明一般居有多媒体数据，数据大量的情况下，规定上传文件method是post方法，type属性必须是file。
3.text/plain:空格转换为“+”，但不对特殊字符进行编码。

input其他属性

1.name:用于设定提交数据的属性名
2.value:控件初始化，可选
3.checked:单、复选框默认选中属性
4.disabled:表示禁用组件，禁用组件的值不能被提交
5.size:初始宽度，以像素为单位，当控件类型是text和password时，宽度是整数值，默认为20。
6.maxlength:指定可以输入字符的最大值，使用于控件类型为text，password。

label

和特定表单元素关联方式
1.显示关联
通过label标签的for属性，显式与另一个表单控件关联，for属性的值必须是与label标签在同一文档中的可标记表单元素的id
注：是id而不是name
优点：减少标签嵌套层数；label标签和表单可以在不同的位置
缺点：控件需要定义id属性；label标签和表单控件不利于作为一个整体来控制

<form action="">
    <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
    </div>
    <input type="submit" value="提交">
</form>

2.隐式关联
直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效
优点：控件无需定义id；标签和控件方便作为一个整体控制
缺点：增加了标签嵌套层数；不能将标签和关联控件放到不同的位置

<form action="demo_form.asp" method="get" id="genderform">
    <label>Male
        <input type="radio" name="sex" id="male" value="male" />
    </label>
    <br />
    <label>Female
        <input type="radio" name="sex" id="female" value="female"  />
    </label>
    <input type="submit" value="提交" />
</form>

html语义化标签（新）

语义化标签

什么是语义元素？

语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如，当浏览器解析到<h1></h1>标签时，它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题。

为什么要语义化？

代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

常用语义化标签

语义化标签

结构体

header
h1~h6
nav
footer
article
section

文本

p
ul
ol
li
blockquote

一致

a
strong
em
q
abbr
small

<header>元素

用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。

<nav>元素

定义页面的导航链接部分区域，不是所有的链接都需要包含在<nav>中，除了页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。

<main>元素

定义页面的主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

<article>元素

定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

<section>元素

元素用于标记文档的各个部分，例如长表单文章的章节或主要部分。

<section>
    <h2>Section title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
</section>

<aside>元素

定义与主要内容相关的内容块。通常显示为侧边栏。

<footer>元素

定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

<small>元素

为较不重要的内容定义小字体。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。

<strong>元素

把文本定义为语气更强的强调的内容，以表示内容的重要性。

<em>元素

标记内容着重点（大量用于提升段落文本语义），通常呈现为斜体文字。

<blockquote>元素

定义块引用，浏览器会在blockquote 元素前后添加换行，并增加外边距。cite属性可用来规定引用的来源
浏览器会在 blockquote 元素前后添加换行，并增加外边距。cite属性可用来规定引用的来源

<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">
    Here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

<abbr>元素

解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。

<canvas>

<canvas>元素**来绘制图形和动画。

<pre>

元素代表预格式化文本将被准确地呈现写在HTML文件。文本通常使用非比例呈现，或“<pre> [等距]，字体。此元素内的空白显示为书面形式。 |

class常用名称

以下为页面模块的常用命名：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink或link
页脚：footer
版权：copyright
滚动：scroll
小技巧：tips

最后编辑于：2021.09.22 16:58:16

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,772评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,458评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,610评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,640评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,657评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,590评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,962评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,631评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,870评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,611评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,704评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,386评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,969评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,944评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,179评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,742评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,440评论 2赞 342