13518219792
一、文本标签
成都创新互联公司专业为企业提供神池网站建设、神池做网站、神池网站设计、神池网站制作等企业网站建设、网页设计与制作、神池企业网站模板建站服务，十载神池做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
1.1 标题标记：hn align=”对齐方式”标题文本/hn
注意：
1.标题准备了h1----h6的标题，按照字号依次递减(块级元素)
2.align表示对齐方式，其值为left,center,right
1.2 字体标记：font face=”字体名称” size=”字号” color=”字体颜色” 文字/font
注意：中文网页以黑体，宋体，3号字的效果显示
1.3 段落标记：p align=”对齐方式” 段落内容/p
注意：p可以作为单标记或双标记：
单标记：段落与上文产生一个空行的间距。
双标记：段落与上下文之间产生一个空行的间距
1.4 换行标记：
注意：br /表示换行，多次换行多次使用br /
1.5 预格式化标记：pre...../pre
注意：预格式化标记可将空格、制表符、回车符等忽略
1.6 转义字符：转义字符让特殊字符显示出来。
语法：实体名称;
二、列表标记
2.1 无序列表
ul type=”列表项的标签符”
li项目一/li
li项目二/li
li项目三/li
......
/ul
注意： type表示了项目符号：
disc(默认) 实心圆
circle：空心圆
square：实心方块
2.2 有序列表：
ol type=”列表项的标记符” start=”起始值”
li项目一/li
li项目二/li
li项目三/li
......
/ol
注意：1. 1:1,2,3,.......
a:a,b,c,d,e.......
A:A,B,C,D,E.......
i:i,ii,iii,iv......
I:I,II,III,IV......
2.start表示起始值,从第几个数开始计算
2.3 嵌套排列
ol type="1"
lih/li
lit/li
ul type="disc"
lim/li
lil/li
/ul
li5/li
/ol
2.4 分割线标记：hr align=”对齐方式” size=”水平线高度” width=”水平线宽度”
color=”水平线颜色”
三、超链接标记
3.1 文本链接：a href=”目标URL” target=”目标窗口”指针文本/a
注意： 1.href表示文本链接的目标资源的URL
绝对地址和相对地址
绝对地址：在任何情况下都可以找到的地址（例如：网址）
相对地址：必须知道当前所在，才能找到（../表示上一级目录，/表示下级目录）例子：../img/baidu.jpg 表示在当前位置的上一层目录下的img文件夹中的baidu.jpg 文件。
3.2 图片标记：img src=”图片文件路径” alt=”提示文本” height=”图片高度” width=”图片宽度”/
3.3 多媒体标记
3.3.1 滚动字幕标记：marquee可以实现文字或图片的跑马灯效果
marquee..../marquee
marquee的属性：
behavior 指定了跑马灯的效果：scroll(滚动)、slide(滑动)、alternate(交替)
bgcolor:跑马灯的背景颜色
direction:跑马灯的移动方向，left（左）、right(右)、up(上)、down(下)
scrolldelay:每次移动的延迟时间，单位毫秒
loop:跑马灯运行次数，-1表示无限循环
height、width
hspace:左右空白宽度
vspace:上下空白宽度
3.3.2 嵌入音乐文件
audio src=”文件地址” 提示文字/audio
3.3.3 嵌入视频文件
video src=”视频文件地址” controls=”controls”提示文字/video
四、表格
4.1 表格基本语法：
table
tr
......
td单元格内容/td
......
/tr
/table
注意：
table:声明一个表格对象
tr:声明一行
td:声明一个单元格
4.2 表格的基本属性
1.align 对齐方式：left、center、right
2.border:表格边框
3.bordercolor:边框颜色
4.bgcolor:表格背景颜色
5.background:背景图片
6.height、width
4.3 单元格合并
1.rowspan:所跨的行数
2.colspan:所跨的列数
五、表单
5.1 表单标签：form action=”URL” method=”get|post” target=”...”/form
注意：form：该标记中包含的数据将被提交到服务器或者电子邮件中
action:指定服务器端处理提交表单信息的程序是什么。URL地址或电子邮件地址
method:get/post:数据传输到服务器的传递方法
target:服务器返回文档结果的显示位置：_blank:在新的浏览器窗口中打开
_self:在当前浏览器中显示
5.2 表单标记
5.2.1 input标签：input type=”类型” name=”服务器 获取用户输入信息的名字” value=”初始值”
注意：1.type类型（输入类型）:
1. text:单行文本框
2. password:密码输入框
3. radio:单选按钮 checked表示默认
4. checkbox:复选框 checked表示默认
5. submit:提交按钮
6. reset:重置按钮
7. button:普通按钮
2.maxlength：输入的最大长度
5.2.2 select标签
select name=”” size=”” multiple
option value=”选项1” 选项1
.......
option value=”选项n” 选项n
/select
注意：name:服务器 获取用户输入信息的名字
value ：初始值
option：下拉框的内容
multiple:多选，若没有multiple则是单选
selected:表示默认选项
size:表示长度
5.2.3 textarea 标签：textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”
/textarea
注意: name：多行文本框的名称
cols：一行可容纳的字符数
rows：表示可显示额的行数
wrap:virtual和phycal控制自动换行
基本沿用了html基础语法。但更简洁更人性化,主要有以下5点：
!doctype html
字符集设置
meta charset="utf-8"
不允许写的结束符的标签： area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
可以省略结束符的标签： li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th
新增结构化标签 ：
从div...div/派生而出
(1)header标签 :顾名思义，header标签用于将 HTML 页面的一部分标记为页眉。
(2)section标签 :section标签用于标识页面上的重要内容部分。该标签有点类似于将一本书分成几个章节。
(3)article标签 :article标签标识了 Web 页面中的主要内容。以博客为例，每篇帖子都构成一个重要内容。
(4)aside标签 :aside标签表示标签中包含的内容与页面主要内容相关，但不是该页面的一部分。这有点类似于使用括弧对正文进行注释（就像这样）。括弧中的内容提供关于该元素的一些附加信息。
(5)footer标签 :footer标签将所包含的元素内容标记为文档的页脚。
( 6)nav标签 :nav标签中包含的内容主要用于导航。
示例：
新增媒体标签：
video
audio
embed
input type="checkbox" checked/
写明表示true；否则false
不区分大小写，与xhtml不同
单双引号皆可，有空格时不行。
var isplay = true;//默认是播放的
var video = document.getElementById("myVideo");
document.onkeyup=function(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e e.keyCode==8){ // 按 空格并让它弹起
//要做的事情
if(isplay) {//判断当前播放状态
isplay = false;
video.pause();
}else {
isplay = true;
video.play();
}
};
业内有过缩进选用Tab还是空格的争论。在缩进方面，Tab键和空格这两种方法的特点并不相同。
1、 Tab键与空格缩进的特点
Tab键：在书写代码时会很方便，但是在不同编辑器当中，距离大小有可能不同。在编辑器当中，一个Tab键的长度大小存在一个默认值，这个默认值可以是两个空格长度，也可以是4个，还可以是8个。由于团队开发当中，每个人的编辑器默认情况下可能不一致，从而有可能造成A的代码放到B的编辑器中时，缩进的长度发生变化。
4个空格：在每个编辑器中，空格大小一致，其不足之处在于：代码书写时会比较麻烦，需要按多次空格键。
2、 如何选择缩进方式
其实并不需要纠结这个问题，各个编辑器都提供了“空格”和Tab键的相互转换。因此，完全可以使用Tab键进行书写，在书写完毕之后，将Tab键转换为空格，之后生成最终文件即可。当然，有些公司并不要求使用空格，那开发工程师就更方便了。
最终文件采用哪种方式，需要根据公司要求而定。如果公司没有硬性要求，那么自己的代码一定要保持一致性，不要出现“10个文件中，3个使用的是空格进行缩进，7个使用的是Tab键进行缩进”这种现象。
如图所示，在Sublime编辑器中，可以进行选项卡宽度的设定，也可以实现空格与Tab键的互相转换。
资料来源：《HTML5布局之路》
通常情况下，我们用空格键来打出多个空格，而在编写代码时，通过空格键、Tab键以及回车键打出的空格，都会被HTML（超文本标记语言）自动忽略。HTML将这样的键视为空白字符，并显示为单个空白间隔。尽管CSS提供了多种样式的空格和缩进，但是在HTML中也有一些工具可以让你自己定义空格。
1、插入一个非间断空格
一般来说，无论你按多少次空格键，HTML也只会在单词之间显示一个空白间隔。当你需要插入多个空格时，请输入nbsp;或#160;代码。[1] 它们名为“空格占位符”，你输入几个，就能在页面中显示几个空格。之所以称之为非间断空格，是因为这样不会产生换行符。如果你滥用这种空格，浏览器可能无法以整齐易读的方式插入换行符。
2、插入不同宽度的空格
有多种字符实体可以让浏览器显示空格。不同的浏览器在显示方式上可能会有一点不同，但是和nbsp;不同，它们不会影响换行：
ensp; — “en空格”是根据字体排印学的计量单位命名，宽度是两个普通空格的宽度
emsp; — “em空格”大概是四个普通空格的宽度
3、使用非间断空格模拟制表符
生成段落的一种方式就是在第一行前插入几个空格：nbsp;nbsp;nbsp;nbsp;。这个方法只适用于HTML，如果你使用CSS的话，不推荐这一方法（在其它步骤中会介绍别的方法）。如果段落的内容是富文本，请使用“pre”标签。
4、使用CSS生成段落。
CSS的内边距或外边距给浏览器指明了具体的显示格式，所以显示效果的一致性较高。即使你不是很了解CSS，手边也没有说明表，也可以很容易地添加。下面将具体说明如何将整个段落移到右边：[5]
在HTML文档的head/head部分，插入以下命令：
stylep.indent{ padding-left: 1.8em }/style
“p.indent”定义了一个叫“indent”（可以随意命名）的段落（标签为p）。剩下的命令则是给段落左侧添加内边距空格。
返回HTML文档的主体。每当你想添加段落时，在标签中插入以下内容：
p class="indent"/p
要调整缩进的数量，只需要更改CSS命令中的数字“1.8”即可。后面的“em”要保留，它是表示宽度的单位。
