html经常使用标签

时间 2019-12-08

标签 html 经常使用标签栏目 HTML 繁體版

原文原文链接

目录css

html的文件结构
- head
  - title
- body
  - hx
  - p
  - em/strong
  - span
  - q
  - blockquote
  - br
  - nbsp
  - hr
  - code
  - pre
  - ul-li
  - ol-li
  - div
  - table
  - a
  - img
- form
  - label
  - input
  - textarea
  - select-option

html的文件结构

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

head

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

title

title标签是网页的标题信息
浏览器

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>

p

做用：p标签是段落标签
语法：<p>段落文本</p>spa

em/strong

做用：强调文字，默认em是斜体，strong是粗体，均可以用css调整
用法：<em>强调文本</em>
用法：<strong>强调文本</strong>code

span

做用：span标签为文字单独设置样式（经过css）
用法：<span>单独处理文本</span>orm

q

做用：q标签是引用标签，引用的文字会自动加上引号
用法：<q>引用文本</q>htm

blockquote

做用：长引用标签，默认作法是缩进
用法：<blockquote>引用文本</blockquote>图片

br

做用：换行 ( break )
用法：<br />

nbsp

做用：空格，你在html里面输入的空格最后都会被解析成1个空格，因此须要多个空格的使用能够用nbsp（Non-breaking space）你也能够记忆为nb(牛逼) sp (space空格)

用法： 

hr

做用：分隔线 ( horizontal )
用法：<hr>

code

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

pre

做用：在处理多段预览文字或代码时使用（保证显示的格式，不须要<br />或&nbsp控制格式）
用法：<pre>语言代码段</pre>

ul-li

做用：无序列表显示
用法：

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

效果：

ol-li

做用：有序列表显示
用法：

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

效果：

div

做用：划分（division ），能够根据逻辑组成把页面划分红不一样部分，而后经过css对不一样部分进行装饰。（就像屋内的房间划分同样）

用法：<div>…</div>

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>

caption

做用：表格标题

summary

做用：表格

a

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

做用2：连接Email地址

<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>

这样就能够点击“男”或“女”触发点击单选的功能

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设置和取得。

textarea

做用：文本域，支持多段文本
用法：<textarea rows="行数" cols="列数">文本</textarea>
注：属性能够经过css修改weight和height更改

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>

注意：下拉框能够多选，select启用属性multiple="multiple",而后在选择的时候，按ctrl（mac上command），就能够多选