美文网首页
HTML常见标签

HTML常见标签

作者: EricRaider | 来源:发表于2019-03-28 19:19 被阅读0次

1- 链接
又称超链接,设置页面中允许被点击的内容。
【标签】<a></a>
【属性】
href:链接地址(要跳转到的页面的地址)
target:目标,打开新网页的形式
取值:
_blank:在新标签页中打开
_self:在自身页面中打开(默认值)
title:鼠标放到链接上的提示

2- 文本标记

文本样式

斜体:<i></i>
粗体:<b></b>
删除线:<s></s>
下划线:<u></u>
上标:
下标:

标题元素

以标题的形式来显示文本内容

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

【特点】

  • 改变字号(一级最大,六级最小)
  • 加粗显示
  • 上下有垂直的空白距离
  • 独立成行

段落元素

【标签】<p></p>
【特点】

  • 默认文字大小
  • 独立成行
  • 上下垂直空白

换行元素

【标签】

分隔线元素

【标签】



【属性】
size:尺寸,取值单位为 px(像素),可以省略
width:宽度,取值单位为px(像素)可以省略或百分比
color:颜色,取值自然颜色值
align:水平对齐方式,取值:left/center/right

分区元素

(1)块分区元素:<div></div>
【特点】独立成行
【作用】页面布局
(2)行内分区元素:<span></span>
【特点】多个元素在一行内显示
【作用】设置同一行文字内的不同格式

行内元素与块级元素

(1)块级元素(div 、p、h1~h6)
【特点】元素会独占一行,即元素前后都会自动换行,主要用于网页布局
(2)、行内元素( span、i、b、s、u、sub、sup、img、a)
【特点】不会换行,多个元素会在一行内显示

3- 图像

路径

URL:Uniform Resource Locator(统一资源定位器,俗称:路径)
作用:标识网络任何资源的位置

(1)绝对路径:从文件所在的最高级目录下开始查找资源文件所经过的路径
-包括网络资源&本地资源(如:E:\mmper\练习\img\flower.jpg)
(2)相对路径:从当前文件位置处开始,查找资源文件所经过的路径

  • 同目录,直接用, 直接通过资源文件名称进行引用(a.jpg)
  • 子目录,进入到子目录中,然后再对资源文件进行引用(img/a.jpg)
  • 父目录,返回到父级目录再对资源文件进行引用(../a.jpg)

图像

【标签】<img>
【属性】
src:图片地址(绝对/相对)
width:图像宽度
height:图像高度

4- 表格
由<table>元素定义。
【标签】<table></table>
【属性】
width :设置表格的宽度
height:设置表格的高度
align:设置表格的对齐方式,取值: left/center/right
border:设置表格边框宽度
cellpadding:内边距(单元格边框与内容之间的距离)
cellspacing:外边距(单元格之间的距离)
bgcolor:设置表格的背景颜色

table中包含的子元素

<table></table>中包含的子元素:
【标签】<tr></tr> (创建表行)
【属性】
align:该行内容水平对齐方式,取值: left/center/right
valign:该行内容的垂直对齐方式,取值: top/middle/bottom
bgcolor:设置表格的背景颜色

【标签】<td></td> (创建单元格)
【属性】
align:内容水平对齐方式
valign:内容垂直对齐方式
width :宽度
height :高度
【标签】<caption></caption> (表格标题)
【标签】<th></th> (列标题)
行标题或列标题,字体有加粗的效果,放在tr中
【标签】<thead></thead> (表头)
【标签】<tbody></tbody> 表主体)
【标签】<tfoot></tfoot> (表尾)

一个完整的表格

<caption>标题文本</caption>
<table>
   <thead>
    <tr>
      <td>姓名</td>
       <td>性别</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

表格的其他应用

(1)不规则表格

  • 跨列:从指定单元格位置处,横向向右合并几个(包含自己)单元格
    属性:colspan=值(数字,合并单元格的个数);
  • 跨行:从指定单元格位置处,纵向向下合并几个(包含自己)单元格
    属性:rowspan=值(数字,合并单元格的个数);
    (2)表格的嵌套
    在单元格中去嵌套另一个表格,但嵌套的表格必须要放在td中

5- 列表
将一组具有相似特征或者具有先后顺序的内容按照从上到下的顺序排列在一起

有序列表

<ol>
    <li></li>
</ol>

【属性】
type:指定列表项标志的类型,默认为数字排列
取值:1(默认值)/a/A/i/I
start:定义起始值(数字),默认从1开始
取值:数字,如:start:1; start:i;等

无序列表

<ul>
     <li></li>
</ul>

【属性】
type:指定无序列表的列表项标识
取值: disc,默认,实心圆/circle,空心圆/square,实心矩形none,不显示标识

自定义列表

<dl>
  <dt>列表中的标题内容</dt>
  <dd>列表中的数据</dd>
</dl>

使用场合:图文混排时使用

6- 表单
由<form>定义,将用户输入的数据提交给后台。
【常见属性】
action:提交的服务器地址
method:表单数据提交的方式,取值: get:明文提交/post:隐式提交
name:定义表单名称,JS用到的比较多
id: 独一无二的标识
如:<form action="url" method="get/post"> </form>

<input>元素
【主要属性】
type:根据不同的type属性值可以创建各种类型的输入字段
value:最终提交给服务器的值
name:控件的名称,提供给服务器使用,没有name,控件则无法提交
id:唯一标识,只能在当前页面使用,服务器不能用
disabled:禁用,不能被提交

常用的表单控件:

(1)文本框:<input type="text">
(2)密码框:<input type="password">
【专有属性】
maxlength:限制输入的字符数,取值:数字
readonly:设置文本控件只读
(3)单选按钮:<input type="radio">
(4)复选框:<input type="checkbox">
【专有属性】
checked,设置默认被选中
(5)提交按钮:<input type="submit">
(6)重置按钮:<input type="reset">
(7)普通按钮:<input type="button">
(8)图片按钮:<input type="image" src="">
(9)隐藏域:<input type="hidden">
(10)文件选择框:<input type="file">

按钮(提交按钮)

<button>内容</button>

下拉选择框select 和 option

<section name="">
  <option value="" selected></option>
</section>

相关文章

  • CSS课程1

    HTML常见标签 HTML常用标签的重要属性

  • HTML标签的权重

    大纲 1、HTML权重标签2、常见的权重标签3、常见的权重标签的使用 1、HTML权重标签 SEOer(SEO从业...

  • ## HTML基础-常见标签

    ## HTML基础-常见标签 # hr标签 # --> # img标签 # br标签 # p标签 # a标签 # ...

  • HTML常见标签

    如果说最常用的标签, 绝对是毫无异义的一位选手。 关键词块级元素 定义和用法在 标签定义的划分或HTM...

  • HTML常见标签

    一、常见特殊类别的元素1、空元素:不可能存在子节点(例如内嵌的元素或者元素内的文本)的元素,如 、 、 等。2、可...

  • HTML常见标签

    注:HTML标签对大小写不敏感,但推荐使用小写! 基本 … 定义HTML文档 … 文档的信息 HTML文档的元信息...

  • Html 常见标签

    html的 注释。 html的 超链接一般为 用来标记一个缩写The H1Z1 was founded in 19...

  • HTML常见标签

    标题 h1~h6代表标题,逐层弱化h1代表页面最大的标题h2代表二级标题h3代表三级标题h4代表四级标题h5代表五...

  • HTML常见标签

    1- 链接又称超链接,设置页面中允许被点击的内容。【标签】 【属性】href:链接地址(要跳转到的页面的地址)t...

  • html常见标签

    一、iframe 标签 http://www.w3school.com.cn/tags/tag_iframe.as...

网友评论

      本文标题:HTML常见标签

      本文链接:https://www.haomeiwen.com/subject/dvicbqtx.html