HTML基础知识点全面解析（转载）

2018-09-21  本文已影响10人  丁俊杰_

常识

简称

元素类型

浏览器与服务器惯例

规范

这个标记要放到<head>元素中所有其他元素的上面

实践

一般

链接

嵌套

工具

HTML****首部元素

html 根元素

web页面的根元素,只有<head>和<body>能直接放在<html>标签中

head 页面头部

HTML****页面主体

body 主体元素

web页面的主体元素

h1- h6 6****级标题

标题默认是粗体,例如: <h1>一级标题</h1>

p 段落

块元素,paragraph的缩写,例如: <p>...</p>

a 超链接

em 强调

内联元素，emphasize的缩写,例如: <em>强调</em>

br 换行

void元素,break的缩写,例如

code 显示计算机程序代码

块元素,例如: <code>...</code>

pre 原样显示文本

块元素,例如: <pre></pre>

strong 加粗文本

内联元素 例子: <strong>加粗</strong>

引用

q 短引用

作为现有段落的一部分,大部分浏览器会加引号，内联元素,quotation的缩写

blockquote 长引用

列表

<ol>和<li>(或者<ul>和<li>)总是要一起使用,列表可以嵌套,例如:

<ul>
<li class="selected"><a href="index.html">HOME</a></li>
<li><a href="blog.html">BLOG</a></li>
<li><a href="">INVENTIONS</a></li>
<li><a href="">RECIPES</a></li>
<li><a href="">LOCATIONS</a></li>
</ul>

li 列表项

块元素,list item的缩写

ol 有序列表

块元素, ordered list的缩写,浏览器负责编号

ul 无序列表

块元素, unordered list的缩写

dl,dt,dd 定义列表

每一项都由一个定义术语和定义描述组成

<dl>
<dt>Burma Shave Sign...</dt>
<dd>Road signs common in the US</dd>
<dt>Route 66</dt>
<dd>Most famous road in the U.S. highway system</dd>
</dl>

字符实体

o > 大于符号

图像

img 图片

图片格式

实践

容器

标记逻辑区

逻辑区就是页面上彼此相关的一组元素,div和span容器用来标记一组元素

div 块元素容器

span 内联元素容器

类似于div，不过是针对内联元素的，建立内联内容的逻辑分组,如:

<ul>
<li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
<li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
<li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
<li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
<li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
</ul>

表格

table 表格

用<table>标记开始一个表格，一行用<tr>开始,每个<th>分别是某一列的表头,表头是前后排列的。每个<td>元素包含表格中的一个单元格。例子:

<table>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td>June 15th</td>
<td>75</td>
<td>1,204 ft</td>
<td>29,686</td>
<td>4/5</td>
</tr>
<tr>
<td>Magic City, ID</td>
<td>June 25th</td>
<td>74</td>
<td>5,312 ft</td>
<td>50</td>
<td>3/5</td>
</tr>
</table>
//添加css
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;//将标题放在底部 }

td, th {
border: thin dotted gray;
padding: 5px;
}

caption {
font-style: italic;
padding-top: 8px;
}

caption 标题

增加标题<caption>...</caption>, 放在<table>元素之下,<tr>元素之上（即使你后面要用css把它显示在下方）,默认会显示在表格上方。

background-color 背景色

添加颜色, 设置背景色即可，如:

th {
background-color: #cc6600;
}

颜色交替

为各行指定交替的颜色, 能够更容易得区分各行, 可以先定义一个新类, cellcolor, 然后把这个类增加到你希望着色的各行(tr)上，如:

.cellcolor {
background-color: #fcba7a;
}

另外还可以用下面的nth-child实现

nth-child 伪类

nth-child伪类是一种更高级地选择元素的方法，例如让偶数段落有红色背景，奇数段落有绿色背景:

p:nth-child(even){
background-color: red;
}
p:nth-child(odd){
background-color: green;
}

这个伪类还可以更加灵活，用数字n制定简单表达式，如奇偶数：

p:nth-child(2n){
background-color: red;
}
p:nth-child(2n+1){
background-color: green;
}

合并单元格

就是说有的单元格要跨越多行，可以使用rowspan属性，指定一个数据单元格占多少行，然后从这个单元格所跨越的其他行中删除相应的表格元素。表格元素还能跨多列，只要为td元素增加colspan属性，然后指定列数，跨多列时需要删除同一行中的表格数据元素，例如：

<tr>
<td rowspan="2">Truth or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td rowspan="2" class="right">4,242 ft</td>
<td rowspan="2" class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr>

<td class="center">August 27th</td>
<td class="center">98</td>

<td class="center">4/5</td>
</tr>

嵌套表格

表格里可以嵌套表格,只需要把另一个table元素放在一个td中，例如：

<tr>
<td class="center">August 27th</td>
<td class="center">98</td>
<td class="center">
<table>
<tr>
<th>Tess</th>
<td>5/5</td>
</tr>
<tr>
<th>Tony</th>
<td>4/5</td>
</tr>
</table>
</td>
</tr>

处理表格双线

默认情况下每个单元格都有边框，会形成双线，分散注意力，可以在table中将border-spacing设置为0px,还可以用border-collapse的css属性来折叠边框，使单元格之间根本没有边框间距，这样浏览器会忽略所有边框间距，然后将紧挨的两个边框合并成一个边框(good),例如：

table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}

其他实践

表单

表单form

action属性包含web服务器的url, method属性确定表单数据如何发送到服务器，如POST,另外input 是内联元素, 如果想要有换行用

, 例子如下:

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
<p>Just type in your name (and click Submit) to enter the contest:

First name: <input type="text" name="firstname" value="">

Last name: <input type="text" name="lastname" value="">

<input type="submit">
</p>
</form>

POST****和GET请求

浏览器发送数据的方法主要有两种，POST和GET。POST和GET完成的任务是一样的，都是把表单数据从浏览器发送到服务器，不过采用了两种不同的方式，POST会打包你的表单变量，在后台把它们发送到服务器，GET也会打包你的表单变量，但是会把这些数据追加到URL的最后，然后向服务器发送一个请求.

那么什么时候使用post什么时候使用get呢？如果你希望用户能够对提交表单后的结果页面加书签，就必须使用GET,因为如果使用POST就无法加书签了。那什么时候需要加书签呢？假设服务器返回一个搜索列表，你可能希望用户对结果加书签，那么他们就能直接查看这些结果，而不用再填写表单。另外，如果你有一个处理订单的服务器脚本，可能不希望给这个页面加标签，因为否则每次他们返回这个标签时，都会重新提交这个订单。

还有一种情况肯定不想用GET，比如你的表单中的数据是私有的，如信用卡或口令，url是明文看到的，所以不安全。最后，如果你用了textarea就应该用POST,因为可能会发送大量数据，get和post对数据量都有限制，但是post要宽松的多。

可访问性

应该用<label>元素来标记那些标签，label元素可以提供页面结构的更多的信息，使你能更容易地使用css对标签设置样式，另外对于有视力障碍的人，也有助于他们使用的屏幕阅读器更准确地标识表单元素要使用表单元素必须为表单元素增加一个id属性，然后增加一个label，设置其for属性为相应的id。例如:

<input type="radio" id="whole_beantype" name="beantype" value="whole">
<label for="whole_beantype">Whole bean</label>

<input type="radio" id="ground_beantype" name="beantype" value="ground" checked>
<label for="ground_beantype">Ground</label>

field****和legend 分组

当表单变的越来越大时，在视觉上对元素分组会很有帮助，可以用fieldset做到，legend为这一组提供一个标签,例如:

<fieldset>
<legend>Ship to</legend>
<div class="tableRow">
...
</fieldset>

passwords input 密码

输入的文本会加掩码,例如：

<input type="password" name="secret">

file input 文件

创建一个文件输入控件,使用这个元素的前提是必须使用POST方法, 例如:

<input type="file" name="doc">

多选菜单

为select元素增加布尔属性multiple，在屏幕上显示所有项，选择时同时按下ctrl或command键，可以选择多个选项,例如：

<select name="characters" multiple>
<option value="Buckaroo">Buckaroo Banzai</option>
<option value="Tommy">Perfect Tommy</option>
<option value="penny">Penny Priddy</option>
<option value="Jersey">New Jersey</option>
<option value="John">John Parker</option>
</select>

placeholder 提示

为填写表单的人提供提示, 比正常内容浅一些, 例如：

<input type="text" placeholder="Buckaroo Banzai">

Required 必要

可用于任何表单控件, 指示一个域是必要的, 对于设置了这个属性的控件, 如果没有指定值, 就无法正常提交表单, 例如:

<input type="text" placeholder="Buckaroo Banzai" required>

text input 文本输入

用type属性指示你希望得到一个"文本"输入, 大多数表单元素都需要一个名字, 服务器脚本将使用这个元素名, 用maxlength限制最大字符数, 例如创建一个单行控件：

<input type="text" name="fullname">

submit input 提交输入

创建一个按钮, 允许你提交表单, 点击该按钮时, 浏览器将表单发送到服务器进行处理。标签默认为"Submit"(提交), 或者"Submit Query"(提交查询), 用value属性制定提交按钮的名字, 例如：

<input type="submit">

radio input 单选按钮

创建包含多个按钮的控件, 一次只能选择一个按钮。给一组给定选项关联的单选按钮必须有相同的名字...每个选项可以有不同的值, 通常将单选按钮的标签放在元素右边,使用checked布尔属性默认选中某个元素,例如：

<input type="radio" name="hotornot" value="hot"> hot
<input type="radio" name="hotornot" value="not" checked> not

checkbox input 复选按钮

创建复选框控件，可以选中也可以不选中,允许选择0个或多个选项。给一组给定选项关联的单选按钮必须有相同的名字name...每个选项有不同的值value,通常将复选按钮的标签放在元素右边,使用checked布尔属性默认选中某个元素,例如：

<input type="checkbox" name="spice" value="salt">
<input type="checkbox" name="spice" value="Pepper">
<input type="checkbox" name="spice" value="Garlic" checked>

textarea 文本区

select 菜单

html5****表单控件

number input 数字输入

限制只能输入数字，用min,max来限制允许输入的数字, 例子:

<input type="number" min="0" max="20">

range input 范围输入

类似number，显示滑动条,step指定步长,例子:

<input type="range" min="0" max="20" step="5">

color input 颜色输入

单击时弹出颜色选择器,例子:

<input type="color">

date input 日期输入

日期选择器,例子:

<input type="date">

email input email****输入

文本输入元素，在移动浏览器上，开始输入email时会得到一个方便输入email的定制键盘,例子 :

<input type="email">

tel input tel 输入

与email类似，在移动设备上弹出一个定制键盘, 例子 :

<input type="tel">

url input url 输入

和email，tel类似, 例子 :

<input type="url">

html5****新增元素

上面的都是属于html的标准的，html5在这个基础上又添加了一些新的元素，如article,nav,header,footer,time,aside,section,video等,虽然这些新元素用起来和原来的一样，但是使用新元素，浏览器，搜索引擎和开发人员就能肯定该元素是什么，用最合适的元素完成任务。比如aside元素，在屏幕大小受限的移动手机上，浏览器知道这个内容是一个aside，你可能会看到内容被塞到页面最下面，让你首先看到最重要的内容。相反如果使用div就什么情况都可能发生。这些元素本身没有多少样式，不过可以为页面中的内容增加含义信息.

footer 页脚

用footer表明这段是页脚，例如:

<footer>
© 2012, Starbuzz Coffee


All trademarks and registered trademarks appearing on
this site are the property of their respective owners.
</footer>
//相应的css也需要改变，把#footer 改成footer
footer {
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 0px 10px 10px 10px;
font-size: 90%;
}

section 节

用section将相关内容组织在一起,例如可以把饮料内容都放在一起，主要内容放在一起,例如 :

<section id="drinks">
<h1>BEVERAGES</h1>
<p>House Blend, 1.49</p> <p>Mocha Cafe Latte,2.35</p>
<p>Cappuccino, 1.89</p> <p>Chai Tea,1.85</p>
<h1>ELIXIRS</h1>
<p>
We proudly serve elixirs brewed by our friends
at the Head First Lounge.
</p>
<p>Green Tea Cooler, 2.99</p> <p>Raspberry Ice Concentration,2.99</p>
<p>Blueberry Bliss Elixir, 2.99</p> <p>Cranberry Antioxidant Blast,2.99</p>
<p>Chai Chiller, 2.99</p> <p>Black Brain Brew,2.99</p>
</section>

article 文章

用article包含独立的内容，如一个新闻报道，例如:

<article>
<header>
<h1>Starbuzz uses computer science</h1>
<time datetime="2012-03-10">3/10/2012</time>
</header>
<p>
Have you ever noticed how efficient a Starbuzz Coffee
house is? The lines alway move fast, and despite the
astronomical number of different drinks any customer can
order, we have your drink up, hot (or cold if that's the
way you want it) and ready in seconds. How do we do it?
</p>
</article>

time 日期

time元素有个重要的属性:datetime,datetime要用官方internet日期格式来写，如果内容没有按官方日期写，就必须有datetime属性。官方日期完整格式为yyyy-MM-dd hh:mm，可以指定一部分.例如：

<time datetime="2012-02-18">2/18/2012</time>

header 元素

可以为article,section,aside增加header元素，可以增加一些内容，比如署名，footer元素也可以,通常，section和article都会有一个header,用来提供描述或介绍,即使只有一个标题也可以使用header,提供额外的语义含义，将文章的首部与其余的内容区分开。例如:

<section id="blog">
<article>
<header>
<h1>Starbuzz meets social media</h1>
<time datetime="2012-03-12">3/12/2012</time>
</header>
...

nav 导航

导航nav,创建一组链接，包围在一个无序列表中，使用一个类来标识被选中的一项,nav可以插入到页眉的下面

<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li class="selected"><a href="blog.html">BLOG</a></li>
<li><a href="">INVENTIONS</a></li>
<li><a href="">RECIPES</a></li>
<li><a href="">LOCATIONS</a></li>
</ul>
</nav>
//对应要为他们设置css样式，不然不符合期望 nav {
background-color: #efe5d0;
margin: 10px 10px 0px 10px;
}
nav ul {
margin: 0px;
list-style-type: none;
padding: 5px 0px 5px 0px;
}
nav ul li {
display: inline;
padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
color: #954b4b;
border-bottom: none;
font-weight: bold;
}
nav ul li.selected {
background-color: #c8b99c;
}

其他html5元素

视频

video

<video>可以用来播放视频，一般的格式如下:

<video controls autoplay width="512" height="288" src="video/tweetsip.mp4">
</video>

o none,则用户播放视频之前不加载视频

o metadata，下载视频元数据

o auto,让浏览器做决定

视频格式

一个视频文件包括两个部分，一个视频部分和一个音频部分，每个部分使用特定编码类型来编码，容器也有自己的格式和格式名,现在主要有3种格式的视频：mp4(H.264,aac) ,webm(vp8,vorbis) ,ogg(theora,vorbis) ,那么如何处理所有这些格式呢？在video元素中可以对应每种格式分别使用一个<source>元素，浏览器从上往下找，直到找到它能播放的一种格式。

<video controls autoplay width="512" height="288">
<source src="video/tweetsip.mp4">
<source src="video/tweetsip.webm">
<source src="video/tweetsip.ogv">
<p>Sorry, your browser doesn't support the video element.</p>//如果浏览器不支持视频，显示此文本 </video>

视频选择

source中可以具体的指定视频格式，为浏览器提供帮助，因为浏览器在决定是否能够播放一个文件之前还要做一些侦查工作，type指定视频文件的容器格式，视频编码器和音频编码器,如果不知道codecs参数可以省略,例如：

<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"`>

如果你喜欢flash可以把flash放到<object>...</object>控件中，并放到source标记下面，如果浏览器不认识video元素，就会使用flash视频。

上一篇 下一篇

猜你喜欢

热点阅读