Html基础知识点

标签：

Html基础知识点

1.在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障

2.HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写

3.HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.w3school.com.cn">This is a link</a>

图片作为链接
<a href="../example/html/lastpage.html">
<img border="0" src="../i/eg_buttonnext.gif" />
</a>

4.DOCTYPE解析
三种解析模式：
IE6,7准标准模式（兼容性问题，html5和CSS3 不支持）
标准模式
混杂模式（非标准）

双击打开的html都是混杂模式，只有经过webstorm这类打开的才是标准模式

5.分为head部分和body部分
head可以写：引入文件，作者关键字

body ：所有标签都要写到body里边

6.HTML基本语法
<p> </p>
有开始标签和结束标签，成对出现，有一些只有一个/，/：结束符
只要软件没有报错都是可以的，有些没有/，空标签
样式写在开始标签里边
简写方法，div 加tab键联想

注释：Ctrl + /
<!-- -->
所有不要的代码，直接注释代码，可能会把配对的标签删除

有下划线的都是在报错

所有标签和元素都必须小写，所有属性用""扩起来，里边嵌套用‘‘
所有标签分为块级元素和行级元素。

块级元素和行内元素：
☆块级元素：可以独占一行，具有一定宽高，和内容无关 div，p,h1-6,dieldset
☆行级元素：不能设置高宽,宽高与内容相关 input,span,strong,a,img

空格：&nbsp
<em>斜体</em>
<b>加粗</b>
<strong>加粗</strong>
在样式里边设置：
font-weight: bold;
换行：<br/><br>
分割线：<hr />
必须用符号写特殊字符，不然样式可能不对

title：
mata:描述

7.盒模型：
一切网页皆为框：

margin：外边距，边框以外的，作用：几个盒子间的间距。有正值和负值
border：边框：
padding：内边距，没有负值
content：内容

谷歌浏览器内部调试，或者看源代码：右键审查元素，检查：F12
JS部分和CSS文件有可能看不到，打包或者加密看不到
其他基本都能看到。模仿网页可以用审查元素或者网页另存为

网页大小：最小一般为16px,火狐除外

查错：在谷歌浏览器里边，调试看结果

一般测试的浏览器：谷歌，火狐，IE可以不测试

8.<div> 可定义文档中的分区或节（division/section）。
不管什么都可以用div标签

div样式直接为一排，没有显示出想要的
<div>
5
+6
-----
11
</div>

<pre>样式按照写的样式显示
<pre>
5
+6
-----
11
</pre>

①字体大小，边框，高宽设置
<span style="width: 100px;height: 100px;border: 1px solid red;font-size:100px">我是格一个span</span>
②设置字体下划线和删除线
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p style="color: red ;font-size: 30px" ><ins>会员注册 </ins></p>

<div style="width: 500px;height: 500px;border: 1px solid red">我是一个盒子</div>
<strong>我是一个srtong</strong>

③单独设置某些字体的样式，用span
<p><span style="color: orangered">*</span> <b>基本个人信息</b>
（<span style="color: orangered">*</span>为必填项）</p>

9.锚点：（回到顶部）
①创建锚点 <a herf = "" name = >
②指向锚点 <a herf = "#+名字">
缺陷：会刷新页面

10.无序列表
<ul>
<li>

11.有序列表
<
ol>
<li>

自定义列表
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

导航全部是用ul li做的

12.表格：
table
tr 行
td列
th列标题
caption 表格标题

rowspan = "2" 行合并，合并二行和三行。。
colspan = "2" 列合并 合并一行的连续几个
cellspacing="2" 外边框 单元格间距(Cell spacing)
cellpadding="2" 内13:54 2016/4/18 单元格边距(Cell padding)
align 对其方式，right ,center,lift

style="border-collapse:collapse" 单边框

thead
tbody
tfoot

内边距：cellpadding cellspacing

13.form表单
input type = ""
type 的值：
text：
password：
reset：
button：这里不能设置高宽
<input type="button" value="Hello world!">
checkbox：
placholder:描述输入域所期待的值
date：日历插件
number：数字插件
file：选择文件
image
color
hidden
submit
reset
email
url
search

readonly="readonly"
placeholder="请输入密码" 在输入框里边灰色提示

<input type="submit">自带提交按钮

用户名：<input class="username" id="username1" name="username2" type="text">

class:常用于HTML，CSS
id：常用于JS
name：常用于共后台操作

id唯一的，class可以不唯一

<form 表单 action="处理地址" method ="get/post" name="">
name 在后台要用到
METHOD="post" ="get"
get:显示，速度快，安全性低
post:不显示在地址上，速度慢，安全性高（封装，加密）

14.button 按钮
可以设置大小
<button style="width: 50px;height: 30px;">按钮</button>

15.textarea 文本域
row:行
col：列

16.radio单选
<div>
<input type="radio" name = "sex">男
<input type="radio" name = "sex">女
</div>

17.checkbox多选，
<input type="checkbox">多选

18.下拉列表 select,option,
<select multiple="multiple">
<option value="sichuan" selected="selected">川菜</option>
<option value="guangdong">粤菜</option>
<option value="beifang">北方菜</option>
<option value="shanghai">上海菜</option>
<option value="west" >西餐</option>
<option value="thailand">泰国菜</option>
</select>

multiple="multiple"设置是否只显示一页
selected="selected"设置选中行

19.filedset,带标题的框
<div>
<fieldset>
<legend>标题</legend>
<p>男 <input name="sex" type="radio"></p>
<p>女 <input name="sex" type="radio"></p>
</fieldset>
</div>

20.label和input配合使用
for里边写相关的表单的id
扩大了作用域
<div>
<input type="radio" id="man" name="sex">
<label for="man">男</label>
<input type="radio" id="nv" name="sex">
<label for="nv">女</label>
</div>

21.视频
<video src="冰河世纪.mp4" controls = "controls" autoplay></video>
controls 控件
autoplay 自动播放
loop:播放完后循环播放

22.音频
audio src="冰河世纪.mp4" controls = "controls" autoplay></video>
controls 控件
autoplay 自动播放
loop:播放完后循环播放

23.语意话
比如标题，段落，head，foot,等这些就是语义化，见名知意

在没有css的情况下可以呈现出良好的内容结构和代码结构，
优化搜索引擎的搜索，便于网络爬虫跟多的获取优先资源
具有可读性，便于开发和维护
遵循w3c的标准，减少差异性

Html基础知识点

标签：

原文地址：http://www.cnblogs.com/chenyuanqiu2008/p/5424440.html