本篇文章给大家谈谈HTML基础---HTML样式，同时本文还将给你拓展HTML+CSS复习之HTML基础篇、Html,sHtml,XHtml区别分析小结_HTML/Xhtml_网页制作、HTML/CS
本篇文章给大家谈谈HTML基础 --- HTML样式，同时本文还将给你拓展HTML+CSS复习之HTML基础篇、Html,sHtml,XHtml区别分析小结_HTML/Xhtml_网页制作、HTML/CSS从零开始-HTML基础(一)、HTML4.0元素默认样式整理_HTML/Xhtml_网页制作等相关知识，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：- HTML基础 --- HTML样式
- HTML+CSS复习之HTML基础篇
- Html,sHtml,XHtml区别分析小结_HTML/Xhtml_网页制作
- HTML/CSS从零开始-HTML基础(一)
- HTML4.0元素默认样式整理_HTML/Xhtml_网页制作
HTML基础 --- HTML样式
style 属性用于改变 HTML 元素的样式。
This text is in Verdana and red
This text is in Times and blue This text is 30 pixels high
一、HTML的style属性
style 属性的作用：
提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
您可以在我们的 CSS 教程中学习关于样式和 CSS 的所有知识。
在我们的 HTML 教程中，我们将使用 style 属性向您讲解 HTML 样式。
二、不赞成使用的标签和属性
在 HTML 4 中，有若干的标签和属性是被废弃的。被废弃（Deprecated）的意思是在未来版本的 HTML 和 XHTML 中将不支持这些标签和属性。
这里传达的信息很明确：请避免使用这些被废弃的标签和属性！
应该避免使用下面这些标签和属性：
对于以上这些标签和属性：请使用样式代替！
三、HTML样式实例 - 背景颜色
background-color 属性为元素定义了背景颜色：
<html> <body style="background-color:yellow"> <h2 style="background-color:red">This is a heading</h2> <p style="background-color:green">This is a paragraph.</p> </body> </html>
style 属性淘汰了“旧的” bgcolor 属性。
四、HTML样式实例 - 字体、颜色和尺寸
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
<html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html>
style 属性淘汰了旧的 <font> 标签。
五、HTML样式实例 - 文本对齐
text-align 属性规定了元素中文本的水平对齐方式：
<html> <body> <h1 style="text-align:center">This is a heading</h1> <p>The heading above is aligned to the center of this page.</p> </body> </html>
style 属性淘汰了旧的 "align" 属性。
HTML+CSS复习之HTML基础篇
一些说明
写在前面：HTML和CSS，当你了解所有规则后，你应该多写页面并记录你出现的问题，这才是学习HTML和CSS的最佳方法
这是我学习一段时间之后，再次回顾HTML，希望大家也对HTML有不一样的认识
我把HTML标签分成两大类，重要的和不重要的，希望大家都能从众多标签中解脱出来！！
本文的宗旨，简明扼要！最快入门 HTML (把我给出的代码不断地敲，并且适当加点个性化的东西，HTML标记语言你就入门了)
温故而知新
HTML，超文本标记语言（HyperText Markup Language）只是标记，没有任何逻辑，学习起来会很快的
结构如下：
这里写了可以出现在head内的所有标签
<!DOCTYPE html> //HTML5的文档声明，现在都用这种方式了
<html> //文档的根
<head> //文档的头部信息
<meta charset="utf-8"> //表示该文档是以UTF-8编码的
<title>菜鸟教程(runoob.com)</title> //页面标题
//为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
//为网页定义描述内容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
//定义网页作者:
<meta name="author" content="Hege Refsnes">
//每30秒中刷新当前页面:
<meta http-equiv="refresh" content="30">
<style>a{CSS样式}</style>
<link rel="stylesheet" type="text/css" href="xxx.css">
<script>脚本</script>
<script type="text/javascript" src="xxxx.js"></script>
<noscript></noscript>
//该标签作为HTML文档中所有的链接标签的默认链接:
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<body> //网页主题部分
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
关于文档声明：(了解即可，没什么作用)
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">tips:注释长啥样？<!-- html content-->
直击主题：HTML标签
来，我们来看看HTML的标签都有哪些
h1 ~ h6 , p , a , img , button , caption , dd , dl ,dt, ul ,li , fieldset , from , iframe , input , label , select , table td ,tr , tbody , tfoot , thead ，hr , html , body head title meta style script ,input , label , legend , div , span
基本上你只要看到这个标签，懂这个标签一般是怎么用的就OK了！
重点掌握的标签有（一些特别基础性的标签不在此之内）
超链接标签a：只要是a标签能包含啥，那个被包含的都是超链接
a的常用方法如下：
1、<a href = "http://xxxx.xxx" target="_blank">
2、电子邮件 <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
3、取消链接 <a href="javascript:void(0)">
4、锚点 <a href="#tips">可以链接到本页面id为tips的元素，用于页面内跳转
<a href="javascript:void(0)">hello</a>
<p>图像标签img:</p>
img[src,title,alt,width,height]
<img src="xxxx.png" width=300 height=200 title="pic" alt="person">
alt : 当图片无法加载时替代图片，一般都要写的
1、图片一个特殊用处(结合map,基本不用)
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<p>表格</p>
一般我们写表格的时候，table>tr>td(th)，采用这三层结构
一个完整的表格结构是这样的
<table>
<caption></caption>
<thead>
<tr>
<th></th>
.....
</tr>
</thead>
<tbody>
<tr>
<td></td>
......
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
......
</tr>
</tfoot>
</table>
属性注意
<table border=0> //设置整个table的边框，外框和内框
<table cellpadding="10"> //相当于设置这个表格每个单元格的 padding 为 10px
<table cellspacing="10"> //相当于设置这个表格每个单元格的 margin 为 10px
<th colspan="2"> // 这个单元格跨了两列 tr也可以用
<th rowspan="2"> //这个单元格跨了两行 tr也可以用列表
有序列表
<ol>
<li></li>
<li></li>
...
</ol>
无序列表
<ul>
<li></li>
<li></li>
...
</ul>
无序列表和有序列表，可以更改前面的标记类型，但是不常用，采用图片或者iconfont居多，可以采用list-style-image：url("xxx.png) ；来设置，这个在CSS学习笔记中会详细说明
列表支持嵌套
自定义列表
dl 注意一个dl里面最好只有一个dt，行业潜规则 原意是解释名词，
dt 一般一条信息，只解释一个名词,也就是一个dt
dd
dd
dd
dl
div -- 最具有代表性的块级标签
通常用于布局，很常见的div+css布局，为什么采用div呢？因为div是一个容器元素，div内部可以包含很多标签，
div内部可以有div的
div是块级标签，注意，任何块级标签写在页面上，宽度都是占据父容器的百分之百，除非你设置块级元素的宽度，具体的怎么排版，请看这篇：HTML+CSS复习之CSS基础篇
span -- 最具有代表性的行级标签
span是一个行级标签，所谓行级标签的意思是，内容有多大，我在页面中占据的位置就有多大（内容+padding）
input --表单
表单的属性特别多，可以去W3C看一遍，这里就不详细讲了，毕竟是写个入门啦。表单主要用作数据传递，所以对表单的理解，就是要搞明白，表单的那些属性是怎么回事
一个表单完整书写
<form action="url" method="post/get" >
//文本框
<input name="username" type="text" />
//密码框
<input name="password" type="password" />
//单选框（注意name要相同,是同一类行的选择，以便后台拿到数据）
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
//多选框（注意name要相同,是同一类行的选择，以便后台拿到数据）
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
//下拉框
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
//这种是为下拉框分组
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
//文本域
<textarea name="textarea" rows="10" cols="30">
我是一个文本框。
</textarea>
//提交按钮，下面的提交按钮，默认提交到action地址
<input type="submit" value="Submit">
<button>submit</button>
//这是另外一种形式的表单，注意其中的区别即可，
//fieldset标签也只会在这种场合使用了
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
//datalist标签，input的list属性绑定到datalist的id，就可以完成这项工作了
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
//注意label标签 , 通过绑定input的id来实现在label出点击获取焦点，有两种写法
<label for="name">用户名</label>
<input id="naem" type="text" size="30">
<label>Hello<input type="text" size="30"></label>
</form>
实例如下：
<label for="name">用户名 </label><input id="name" type="text" size="30"> <label>Hello <input type="text" size="30"></label>
注意: Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。
output标签，顾名思义，输出标签，那么从何处输入，定义规则是怎么样的呢？
form定义规则 ，那么你可不可以写一个升级版的呢？
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 //数据源
+<input type="number" id="b" value="50"> //数据源
=<output name="x" for="a b"></output> //计算出结果
</form>
iframe --一般重要的标签
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
<iframe src="demo_iframe.htm" width="200" height="200" frameborder="0"></iframe>
iframe显示的地址页面内容，制定高度和宽度，frameborder移除边框
用iframe来显示页面内部链接
<iframe src="www.baidu.com" name="iframe_a"></iframe>
<p><a href="http://www.google.com" target="iframe_a">Google</a></p>
全局属性
这些属性，基本上不怎么使用，了解即可。
accesskey 规定激活元素的快捷键。
一下元素支持accesskey属性
<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。
<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a>
<a href="http://www.w3school.com.cn/css/" accesskey="c">CSS</a>
例子：
HTML 、 CSS
class 规定元素的一个或多个类名（引用样式表中的类）。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。
空元素标签
br , hr
HTML5标签
article, aside , audio , bdi , canvas , datalist , command , details ,dialog , embed ,figcaption ,figure ,footer ,header , keygen , mark , meter , nav , output , process , rp ,rt , ruby , section , source , summary , time , track , video , wbr
这些都是html5的标签，一眼便能看出，更加语义化了，如果想看html5标签详解，请看这里:[HTML+CSS复习之HTML5基础篇]()
不重要的标签
b（定义文本粗体） , i（定义文本斜体） , strong , em , big ,small , sub , sup , ins , del , pre , code , kbd , tt , samp , var , address(定义文档作者或拥有者的联系信息) , abbr(定义缩写) , acronym（定义只取首字母的缩写，不支持HTML5） , bdo , blockquote , q , cite , dfn , colgroup , col , center, font , dir(与ul差不多，兼容性不如ul) , frame/frameset(这两个标签已经没人用了，主要是用了这个标签，交互就做不了)
<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<br />
<tt>打字机文本</tt>
<br />
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />
<b>注释：</b>这些标签常用于显示计算机/编程代码。
<acronym title="World Wide Web">WWW</acronym>
<bdo dir="rtl">该段落文字从右到左显示。</bdo>标签嵌套规则
a标签不能嵌套a标签，p标签不能嵌套块级标签
Html,sHtml,XHtml区别分析小结_HTML/Xhtml_网页制作
例如:这个没有结束符浏览器也认识
shtml基于Server Side Include(ssi) ,当有服务器端可执行脚本时候被当做一种动态编程语言看待,可以include，当不包含服务器端脚本时候和html没区别
xhtml基本w3c标准,遵循严格的xml格式，可以认为是一种html向xml的过渡,语法格式要求严格
xhtml
必须有
结束符(所有元素必须关闭)xhtml
(正确嵌套)
xhtml属性要用双引号括起来
xhtml区分大小写，标签的属性和值都是小写
xhtml用id替代name属性
HTML/CSS从零开始-HTML基础(一)
一、web标准
1.1结构
(1)xhtml(extensible hypertext markup language) 可扩展超文本标记语言
(2)w3c(world wide web consortium)万维网联盟
a、制定了结构（xhtml、xml）、表现（css）、标准。
1.2表现
（1）css(cascading style sheets)层叠样式表
1.3行为
（1）ECMA（Europan Computer Manufactures Association）欧洲电脑场商联合会
a、制定了行为 DOM(Document Object Model) 文本对象模型
b、ECMAscript标准
二、HTML基本结构
<!doctype html>
<html>
<head>
<meta charest="utf-8"> <!--编码格式-->
<title></title>
</head>
<body>
<h1></h1> <!--标题-->
.
.
.
<h6></h6>
<p></p> <!--段落-->
</body>
</html>三、基本语法
3.1常规标记
<标记 属性1="属性值1" 属性2="属性值2" >
如下：
立即学习“前端免费学习笔记（深入）”；
3.2空标记
<标记 属性="属性值"/>
如下：
<！--水平线-->
空格
四、常见标记（标签）
4.1列表
a、有序列表
<ol> ordered <li></li> <li></li> <li></li> </ol>
b、无序列表
<ul> unordered <li></li> <li></li> <li></li> </ul>
c、自定义列表
<dl> definition list <dt>被解释</dt> <dd>解释</dd> definition description </dl>
说明：dd可以重复,但是dt只允许有一个;
有序列表中参数 tyle="A"，start="3",//第一个序列从C开始。
4.2图片标签
4.3超链接
路径分为：绝对路径（https//www.baidu.com）,相对路径如（images/inder.html）.
target默认属性值为_self;_blank为打开新窗口
4.4块标签
说明：a、块之间自动换行
b、如果p块限定宽、高，内容为中文时，自动换行；如果是英文不换行，会溢出。
说明：a、span块之间不换行，宽高不能限定，随着文本的长度变化。
4.5表格标签
1、语法：
2、说明;在表格给定宽高后,用属性cellpadding时，如果给定宽度超出设定的宽高，表格会被撑开。
3、单元格合并属性
colspan 合并列
rowspan 合并行
语法：rowspan="3" //合并三行
4、表单
a、表单框
语法：
说明：
b、文本框
c、密码框
d、单选框
如下:
男
女
e、多选框
择偶标准
185
黑
男
东北
disabled="disabled"(禁用、禁选)
checked="checked"(默认选中)
f、重置
(1) （重置，清空以上填写的数据）
g、按钮
(1)
(2)
说明：按钮作为标签时既跳转，又提交
h、下拉列表
(1)
i、文本域
注明：
（1）以上文本框放在表单form里；
（2）在form中属性method的属性值post/get的区别？
a、get是从服务器上获取数据，post是向服务器传送数据；
b、get是把参数值加到提交表单的Action的属性所指的URL中，值和表单内的各个字段一一对应，在URL中可以看见，
post是通过HTTP，post机制将表单内的各个字段与其内容放置在HTML HEADER内一起传送给ACTION属性的URL地址，用户看不见这个 过程。
c、对于get方式，服务器端的ReqestQueryString获取变量的值，对于post方式服务器用Request.Form获取提交数据。
d、get数据传输量小不大于2kb,post的传输量大，一般不受限制
f、get安全性低，post安全性高，但传输效率高
（3）value在input中的用法
a、type="button" /"reset"/"submit"；表示按钮上的文本
b、type="text"/"password";表示初始值
c、type="check"/"radio"定义与输入相关值
（4）表单嵌套
HTML4.0元素默认样式整理_HTML/Xhtml_网页制作
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
关于HTML基础 --- HTML样式的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于HTML+CSS复习之HTML基础篇、Html,sHtml,XHtml区别分析小结_HTML/Xhtml_网页制作、HTML/CSS从零开始-HTML基础(一)、HTML4.0元素默认样式整理_HTML/Xhtml_网页制作的相关信息，请在本站寻找。
本文标签：
