html常用标签

html的文件结构

<html>
    <head>...</head>
    <body>...</body>
</html>

head部分主要有:<title>、<script>、 <style>、<link>、 <meta>

title

title标签是网页的标题信息
your text

body

body部分主要有:<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

hx

<hx>标签是标题标签,表示文章标题(x=1-6)

<body>
	<h1>一级标题</h1>
	<h2>二级标题</h2>
	<h3>三级标题</h3>
	<h4>四级标题</h4>
	<h5>五级标题</h5>
	<h6>六级标题</h6>
</body>

your text

p

作用:p标签是段落标签
语法:<p>段落文本</p>

em/strong

作用:强调文字,默认em是斜体,strong是粗体,都可以用css调整
用法:<em>强调文本</em>
用法:<strong>强调文本</strong>

span

作用:span标签为文字单独设置样式(通过css)
用法:<span>单独处理文本</span>

q

作用:q标签是引用标签,引用的文字会自动加上引号
用法:<q>引用文本</q>

blockquote

作用:长引用标签,默认做法是缩进
用法:<blockquote>引用文本</blockquote>

br

作用:换行 ( break )
用法:<br />

nbsp

作用:空格,你在html里面输入的空格最后都会被解析成1个空格,所以需要多个空格的使用可以用nbsp(Non-breaking space)你也可以记忆为nb(牛逼) sp (space空格)

用法:&nbsp;

hr

作用:分隔线 ( horizontal )
用法:<hr>

code

作用:代码,防止浏览器误认为是要执行代码,而没显示代码。加了标签浏览器就不会执行了,而是像文本一样显示出来
用法:<code>代码语言</code>

pre

作用:在处理多段预览文字或代码时使用(保证显示的格式,不需要<br />&nbsp控制格式)
用法:<pre>语言代码段</pre>

ul-li

作用:无序列表显示
用法:

<ul>
  <li>新闻1</li>
  <li>新闻2</li>
   ......
</ul>

效果:
your text

ol-li

作用:有序列表显示
用法:

<ol>
  <li>新闻1</li>
  <li>新闻2</li>
   ......
</ol>

效果:
your text

div

作用:划分(division ),可以根据逻辑组成把页面划分成不同部分,然后通过css对不同部分进行装饰。(就像屋内的房间划分一样)

用法:<div>…</div>
your text

table

作用,产生一个表格
用法:主要是table、tbody、tr、th、td四元素的使用
<table>表示一个表格
<tbody>表示这个表格内容是一个整体(一次显示而不是多次加载)
<tr>表示一行
<td>表示一个单元格
<th>表示表头
注意:默认是不代框的,如果加框可以用css样式

<table>
  <tbody>
    <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

your text

caption

作用:表格标题

summary

作用:表格

a

作用1:实现超链接
用法:<a href="目标网址" title="鼠标滑过显示的文本" target="_blank">链接显示的文本</a>
target属性表示是在当前窗口还是新窗口打开,_blank表示新窗口,还有_self自身窗口,_top顶部框架,_parent父框架。

作用2:链接Email地址
your text

<a href="mailto: hk2291976@hotmail.com ? cc=abc@hotmail.com ; bb@hotmail.com & subject=主题 & body =邮件内容 ">发送邮件</a>

img

作用:插入图片
语法:<img src="图片地址" title="鼠标滑过显示文字" alt="下载失败时的替换文本" title = "提示文本">

form

作用:表单数据,用于和用户交互
语法:<form method="传送方式" action="服务器文件">
传送方式:POST,GET

label

作用:显示文本和关联控件
语法:<label for="关联名字">显示文本</label>

注意:用for属性可以关联控件,有些像单选多选框这类不易点击的,可以用label关联

<form>
   <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <br />
</form>

这样就可以点击“男”或“女”触发点击单选的功能
your text

input

作用:根据type类型
用法:<input type="类型">显示文本</input
type类型:
text: 文本类型
password: 密码类型
radio:name="name"name属性相同的单选框
checkbox:复选框
file: 选择文件
botton:按钮(定义onclik触发消息)
submit:提交数据
reset : 重置数据

H5中还加入了例如datatime,date,color,tel,range,number……等类型
详细信息

注意:在H5中,可以用placeholder属性作为占位符,可以实现提示信息,值可以通过value设置和取得。

your text

textarea

作用:文本域,支持多段文本
用法:<textarea rows="行数" cols="列数">文本</textarea>
注:属性可以通过css修改weightheight更改

select-option

作用:选择框,节约空间
用法:<option value='提交值' selected="selected">显示值</option>
其中:selected="selected"表示选中

    <label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>

your text

注意:下拉框可以多选,select启用属性multiple="multiple",然后在选择的时候,按ctrl(mac上command),就可以多选
your text

posted @ 2016-09-17 11:09  voidsky  阅读(535)  评论(0编辑  收藏  举报