常用HTML标签和属性

2017-03-19  本文已影响0人  maggie_LV

HTML：超文本都是由标记（标签）组成的
属性：作用是修饰元素(标签)

HTML必用标签（标记/元素）

<!doctype html>
<html lang="en">
  <head>
  <title>常用HTML标签和属性</title>
  <meta charset="UTF-8">
 </head>
 <body>
    第一次用markdown模式编写
 </body>
</html>

<html></html>根元素,每个文档有且仅有一对根元素
<head></head>页面的头部元素，定义页面全局信息

<title>定义网页标题<title>
<meta charset="UTF-8" /><!--声明元数据编码，关键词，描述-->
<style></style><!--声明内部样式表-->
<link /><!--引入外部表-->
<script></script><!--定义或引入脚本文件-->

<body></body>页面内容元素

body属性(可忽略)：
<body text="grey" bgcolor="white"></body>    
   text：文本颜色;
   bgcolor ：背景颜色；

body中常用的HTML标签和属性

结构标记

<header>头部内容</header>
<nav>导航</nav>
<section>小结</section>
<article>文章</article>
<footer>尾部</footer>
<aside>侧边，边栏</aside>

分区元素

块级元素（一般情况下，元素独占一行，元素前后都有自动换行，结构标记都属于块级元素）

<hn>标题元素</hn> <!--n=1~6,1级最大，6级最小-->
<p>段落标记</p><!--商用属性 align="left/center/right"-->
<div>层，主要用于布局</div>

行内元素（默认情况下，多个元素位于同一行，不会换行）

<span>行内元素作用：修改内部内容的样式</span> 

![](图片地址)<!--插入图片-->
    必须属性：src
    常用属性：width，height

链接

<a href="页面路径" target="_blank">文本或图像</a>

属性：
href: 链接URL
target：目标，指打开新网页的方式
        取值：_blank:在新标签页中打开
             _self: 在当前页面中打开（默认）
name：定义锚点名称          
      例：<a name="anchorName">文本或图片</a>
         <a href="#anchorName">文本或图片</a>
         <a href="url#anchorName">链接到另一个页面的摸个位置</a>

表格

<table></table>定义表格
<tr></tr>定义行
<td>创建单元格</td>

<table>
  <caption>标题文本</caption>
  <thead>
    </tr><!--先有行-->
      <td>列在行内</td>
      <td></td>
   </tr>
  </thead>
  <tbody>
    </tr>
      <td>列在行内</td>
      <td></td>
   </tr>
  </tbody>
  <tfoot>
    </tr>
        <td>列在行内</td>
        <td></td>
     </tr>
  </tdoot>
</table>
表格标题：
  <caption>标题文本</caption>
行分组：
    <thead>表头</thead>
    <tbody>表主体</tbody>
    <tfoot>表尾</tfoot>

table属性:
    width：表格宽度
    height：表格高度
    align:水平对齐方式(left,center,right)
    border:设置表格的边框
    cellpadding:内边距(单元格边框与内容之间的距离)
    cellspacing:外边距（单元格与单元格之间的距离）
    bgcolor:背景颜色
tr属性:
    align:left/center/right;
    valign:设置该行内容的垂直方式（top,middle,bottom）
td属性
    align：left/center/right;
    valign: top,middle,bottom;
    width: 单元格宽度
    height:单元格高度
    colspan:单元格跨列（向右合并单元格）
    rowspan:单元格跨行（向下合并单元格）

列表

1.有序列表

<ol type="A" start="1">
  <li>苹果</li><!--列表项-->
  <li>香蕉</li>
  <li>菠萝</li>
</ol>

属性：
    type：列表类型
      取值：1(数字默认类型)
           a(小写字母)
           A(大写字母)
           i(小写罗马数字)
           I(大写罗马数字)
    start：起始编号

2.无序列表

<ul type="disc">
  <li>HTML</li>
  <li>CSS</li>
  <li>JAVASCRIPT</li>
</ul>

属性：
    type：列表类型
    取值：disc:实心圆（默认）
         circle：圆环
         square：实心矩形

3.自定义列表

<dl>
  <dt>列表内容标题</dt>
  <dd>列表数据</dd>
  <dt>水果</dt>
  <dd>香蕉</dd>
  <dd>苹果</dd>
</dl>

表单

<form action="url" method="get/post" enctype="表格数据的编码方式" name=“定义表单名称”>
  1. <input type="text " value=" " name=" " id=" "/><!--文本框-->
  2. <input type="password" value="" name=" " id=" "/><!--密码框-->
     <!--以上两个控件的通用属性：maxlength:限制输入的字符数；readonly：设置控件为只读-->
  3. <input type="radio" value="" name=" " /><!--单选按钮-->
  4. <input type="checkbox" value=" " name=" " id=" " /><!--复选框-->
     <!--以上两个控件的通用属性：checked(默认被选中)-->
  5. <input type="submit" value="显示在按钮上的文字（提交/注册）"><!--提交按钮，type="reset''重置按钮，type="button"普通按钮-->
  6.  <input type="file" enctype="multipart/form-data" method="post"/><!--文件选择框-->
  7. <input type="hidden" name=" " value=" " />
  8. <select name="定义名称" size=" " multipe="设置多选">
      <option  value="选项的值:例：01" selected/*预选中*/>北京    </option>
      <option  value="02" >苏州</option>
     </select>
  9. <textarea name="名称" cols="10" rows="5" readonly/*只读*/>多行文本域</textarea>
  10. <lable for="与该元素相关的控件的ID值">文本</lable>
</form>
属性：
type：可以创建各种类型的input元素，比如：文本框，密码框，单选按钮，复选框
value：当前表单元素的值，可以是提交给服务器的值，也可以是默认显示的初始值
name：名称，要提交给服务器去使用
id：唯一标识，只能在当前页面使用，服务器不能用

通用属性

id: 定义每个标签的唯一标识

title: 提示文本

class: 样式相关，类样式

style: 样式相关，行内样式
上一篇下一篇

猜你喜欢

热点阅读