1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 常用html标签及其属性

常用html标签及其属性

时间:2024-04-12 16:19:56

相关推荐

常用html标签及其属性

一、网页的基本结构

<!DOCTYPE> 标签:声明必须是 HTML 文档的第一行。用来指示 浏览器关于页面使用哪个 HTML 版本进行编译的指令。

<html> 标签:此元素可告知浏览器其自身是一个 HTML 文档。

<head> 标签:用于定义文档的头部,它是所有头部元素的容器。

<body> 标签:body 元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

二、HTML基本标签

1.标题标签(tittle

标签写法:<h1>-<h6>

标签作用:是标明文章、作品等内容的简短语句。

2.段落标签

标签写法:<p>

标签作用:在网页中描述具有一个相对完整的内容。

3.斜体标签

标签写法:<em>

标签作用:实现的一种倾斜的字体样式

不会换行

4.粗体标签

标签写法:<strong>

标签作用:实现的一种加粗的字体样式

不会换行

5.水平线标签

标签写法:<hr/>

标签作用:在网页中加入平行线用来区分上下文

6.换行标签

标签写法:<br/>

标签作用:跳到下一个新行

7.注释

标签写法: <!--注释内容-->

8.大于号

HTML源代码:&gt;

9.小于号

HTML源代码:&lt;

10.空格

HTML源代码:&nbsp;

11.引号

HTML源代码:&quot;

12.注册商标

HTML源代码:&reg;

13.

img 标签

(1) src 图片路径属性

相对路径:

/根路径

./同级路径

../上一级路径

绝对路径(不用)

(2) 宽度widthpx(像素)

高度heightpx(像素)

(3)alt在图片不能正常加载时显示的提示语

(4)title鼠标划上去显示的内容

14.超链接

语法:<a href="链接地址" ></a>

1. <!-- 跳转至本项目 -->

自身窗口:_self:自身窗口

<a href="../4.jpg" target="_self">跳转到首页</a>

新建窗口:_blank:新建窗口

<a href="../4.jpg" target="_blank"> 这是一个超链接,a链接。跳转到其他页面</a>

2.<!-- 跳转至外网 -->

<a href="" target="_blank">百度一下你就知道 </a>

3.<!-- 点图片跳转 -->

<a href=" " target="_blank">

<img src="../4.jpg" width="150px" height="200px">

4.<!-- 拨打电话 tel -->

<a href="tel:16688483388">16688483388</a>

5.<!-- 下载文件

浏览器直接打开跳转【html/txt】

浏览器下载文件【ppt/doc/excel/pdf/exe】 -->

<a href="./文件.doc">下载文件

6.锚连接

创建跳转链接:<a href =“#maker”>链接</a>

创建跳转标记:<a name =“maker” >跳转位置</a>、

举例:

标题

三、HTML列表

1.无序列表

<ul>用来声明无序列表 <li>用来表示列表项。

type属性值: none 没有列表符号

circle 空心圆

disc 实心圆

square 实心正方形

2.有序列表

<ol>用来声明有序列表。 <li>用来表示列表项。

type属性值:1 数字1、2、3……

type属性值:a/A 小/大写英文字母

type属性值:i/I 小/大写罗马数字

3.自定义列表

<dl>用来声明自定义列表

<dt>用来表示列表标题

<dd>用来表示列表内容

4.HTML表格的基本语法

rowspan跨行rowspan 属性规定单元格可横跨的行数。

colspan跨列 :colspan 属性规定单元格可横跨的列数。

<td> 标签:每行被分割为若干单元格使用td定义

<tr> 标签:表格均有若干行组成使用tr定义

<table> 标签:定义表格

5.HTML表格美化

border:设置边框

bgcolor:设置背景颜色

align:设置表格在网页中的对齐方式

cellspacing:设置单元格与单元格之间的距离

cellpadding:设置文字与单元格之间的距离

width/height:表格的宽度/表格高度

四.HTML表单

1.发送表单数据的方式:

标签属性:method

常用值:get | post

2.向何处发送表单数据:

标签属性:action

<form method="post" action="xxx.html"></form>

3.表单元素属性

文本输入:

属性值:text,password

作 用:text,表单中键入字母、数字等内容。

password,输入密码字段。

文件选择:

属性值:file

作 用:file,定义了文件选择。

按钮:

属性值:button

作 用:button,定义了普通按钮。

选择:

属性值:checkboxes,radio

作 用:checkboxes,表单复选框。

radio,表单单选框。

提交按钮:

属性值:submit,image

作 用:submit,定义了提交按钮。

image,定义了图片提交按钮。

重置按钮:

属性值:reset

作 用:reset,定义了重置按钮。

size属性:元素的宽度,当 type 为 text 或 password时。

maxlength:type为text 或 password 时,输入的最大字符数

checked:type为radio或checkbox时,指定按钮是否是被选中

4.HTML下拉列表

select 标签用于声明下来列表

option 标签用于声明列表项

5.HTML多行文本域

可见行数:

标签属性:rows

rows 属性规定 textarea 的可见高度。

可见宽度:

标签属性:cols

cols 属性规定 textarea 的可见宽度。

最大长度:

标签属性:maxlength

maxlength 属性规定文本区域的最大长度(以字符计)。

名称:

标签属性:name

name 属性为文本区规定名称。

<textarea rows="3" cols="20" maxlength="50" name="demo"></textarea>

6.表单的高级应用

隐藏域 type="hidden”

只读:readonly=“readonly”

禁用:disabled="disabled"

7.

HTML语义化表单:

域:使用<fieldset>来定义。将一组表单元素放到域中

域标题:使用<legend>。所谓的域标题就是给创建的域设置个标题。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。