html总结

html

　　　　　　　　　　　　　　hyper text markup language  超文本标记语言

注释<!--           -->

XHTML 与 XML

XML（Extensible Markup language）   可拓展标记语言 是 应用程序之间传值常用的工具 它没有预定义标签 需要自己定义，（在java编程中通常各种框架的配置文件都是由xml写的）

XHTML(Extensible Hyper Text Markup Language) 可拓展超链接标记语言 是  更加严格的 html(集合了xml与html的过度版本)

SEO

　　SEO(Search Engine Optimization) 搜索引擎优化，通过meta标签，设置属性，以及浏览器规则，达到提高网站排名的技术。（a 标签设置title 也有利于SEO）

<meta name="description" content="网站的描述信息">
<meta name="keywords" content="网站关键词">　　　　　　　　　　　　　　　　　　　　

行级元素　（不独占一行，不可设置宽高，margin-top/bootom） display:block

　　a　　span　　em　　strong 　　del　　td（table data）　

块级元素　(独占一行，可以设置宽高等)　　display:inline

　　div　　p　　h1-h6　　tr(table row)　　ol(order list) 　　ul(unorder list) 　　li(list item)　　form　　table

 行级块元素　　(不独占一行切可以设置宽高 margin-top/botoom) display:inline-block

　　img　　input 

 

 

部分标签列表

标签	作用	单双
<a></a>	锚点，链接，协议限定符，发邮件打电话	双
<p></p>	段落	双
<div></div>	最基本的块级元素	双
<span></span>	最基本的行级元素	双
<strong></strong>	加粗　　(不会这么用)	双
<em></em>	斜体　　(不会这么用)	双
<address></address>	地址　　(没用过)	双
<del></del>	中划线　(不会这么用)	双
<img>	引入图片	单
<input>	输入框	单
<br>	换行	单

　　这里注的 不会用 是因为  web开发规范  结构(html) 样式(css) 行为(javascript)相分离

有序列表

<ol type="a",reversed="reversed" start=2>
        <li>布加迪</li>
        <li>兰博基尼</li>
        <li>gtr</li>
</ol>

type 可以选 a A 1 i I　　如果不是这些  会按默认的  以数字为索引

start　　只能填数字  从第几个开始

reversed 　　反向排列

 

无序列表

<ul type="circle">
        <li>马斯克</li>
        <li>布兰德·艾奇</li>
        <li>linux</li>
</ul>

type 可选    disk 默认 圆点　　square方块　　circle圆圈 　　elepese椭圆

自定义列表

<dl>                 difinition List
    <dt></dt>        difinition title
    <dd></dd>        difinition data
</dl>

 

img

<img src="title.png" alt="标题" title="标题">

 src 可以上相对路径 或者 绝对路径　　

alt　占位符   当网络不好 图片未加载出来时显示的   

title　　当鼠标悬停 在图片上面的时候显示

a

 锚点功能

<a href="#top">toTop</a>　　//点击 跳转到 id是top 的元素

链接功能

<a href="./demo.html">toDemo</a>　　//点击跳转到  同目录下demo.html

table

<table>
        <tr>
            <td></td>
        </tr>
</table>

table　　 支持的属性  width height align cellpadding(内边距) cellspacing（外边距）bgcolor

　　　　rules=“all” 添加border　　rows / cols　写谁显示谁   　

td支持　　colspan　　单元格跨列

　　　　　rowspan　　单元格跨行

 

form表单

    <form action="" method="get">　action提交的地址　method方法可以 get / post 
        <input type="text" name="" id="">　　
        <input type="password">密码
        <input type="radio">单选　　　　　　和name 值相同的数据是一组
        <input type="checkbox">多选　　　　和name 值相同的数据是一组
        <input type="submit">提交
        <input type="reset">重置
　　　　　<input type="file" name="" id="">　　提交文件

　　　　　<input type="button">按钮

</form>

 

lable　此标签内的内容 会关联到   带有id 的 input标签

<label for="btn">click</label>

select　　下拉列表

<select name="erae" size=“2”>
    <option value="黑龙江">黑龙江</option>
    <option value="内蒙古">内蒙古</option>
    <option value="西藏">西藏</option>
    <option value="北京" selected="selected">北京</option>　　//selected 是默认选中
</select>

 

 

Html5 新标签

　　textarea　　大小可调节的文本框

    <textarea name="" id="" cols="30" rows="10"></textarea>

　　fieldset　　

<fieldset>
<legend>销往省份</legend>
<input type=”text”>河北

　　iframe 　　在当前页面显示别的页面的内容

iframe src="table.html" width="100%" height="700px" frameborder="0"></iframe>

　　frameborder 是新页面的  border的宽度  0 即可不显示边框

 

语义化标签

标签	语义
header	头部
nav	导航
article	独立于页面的文章等
section	页面中的一个区域(不是头不是尾不是侧边栏)
aside	侧边栏
footer	底部