HTML 基本标签及属性

来源：互联网发布：每日销售数据统计表编辑：程序博客网时间：2024/05/19 13:57

一.html整体结构

<!DOCTYPE html>

<html>

<head>

<title>新浪首页</title> //只能是纯文本，任何标记都会原封不动的显示

<meta charset="utf-8"/>

<meta http-equiv="content-type" content="text/html; charset=utf-8">//老版本

<meta name="keywords" content="手机,电脑,数码"/> 设置网站的关键字，用于搜索

<meta name="description" content="sh61第一个程序" /> 设置网站的描述

<meta http-equiv="refresh" content="3,url=www.baidu.com" /> 重定向

<link rel="stylesheet" type="text/css" href="css.css"> //链接样式

<script type="text/javascript" src="js.js"></script> //链接JS

<style>写css样式</style>

</head>

<body>

网页正文……

</body>

</html>

l 功能：告诉浏览器，如何翻译汉字。

l http-equiv：模拟http协议的文件头原信息，主要目的是服务器向客户端返回时，用什么格式显示。

l Content-type：内容类型。

l Content：详细内容类型介绍。

l Text/html：网页是text格式，html是文本中的小格式。

l Charset：字符集，主要控制汉字如何显示。

l Utf-8：多国语言编码，什么国家的语言都可以正常显示。

二．格式标签:

<hr>：水平线 <br>：换行 <p>：段落

<pre>：原样输出，不支持标签直接输出 <center>：居中

<ol 有序列表 style start reversed（倒序）> 例：（ol type=”A”,start=”3”）

<ul 无序列表 [type] 样式 disc circle square>：

<li>：列表中的项目

释义列表：<dl 定义列表><dt列表标题><dd详情></dd></dt></dl> //一般用在网页最下面

三．文本标签

<h1>-<h6> 标题 / <b><i><u>粗斜下划线 /

<sub><sup>上下标/<font face（字体） size(1-7) color>; / <s>：中划线（del）

四．a标签

<a href="" 可以是URL,也可以绝对路径和相对路径

绝对路径: D:\wamp\www\tz.php

相对路径: ./ 当前目录 ../ 上级目录 /根目录 “\”代表本地分割符“/”网络分割符

target：打开方式（_self 当前窗口/_blank 新窗口/_top （这个目标使得文档载入包含这个超链接的窗口）在顶层窗口打开/ _parent 父级窗口打开）

title：鼠标停留时的提示文字

name：名字(定义锚点时配合#用)

例：1.<a href='user/index.php' target='main'>跳转到index,在mian中打开。

2.<a href="./demo06.html#bottom">跳到底部</a>

<a name="bottom">底部</a>
img标签

<img src="URL" width height title(提示文字) alt(替代图像的文本，无法加载时)>

image：图片按钮有提交功能，再套个标签。

五．表格标签

结构

<table><caption><tr><th><td>

<table>：表格

属性： width：宽度/height：高度/border：边框/bgcolor：背景颜色/

background：背景图片

cellspacing：单元格间距(外间距)/cellpadding：单元格与内容间距(内间距)

align：当对于外边的水平对齐方式

<caption>：表格标题

<tr> 代表HTML表格中的一行

属性： height/bgcolor

align：水平对齐方式 left|center|right

valign：垂直对齐方式 top|middle|bottom

| 代表单独的格子（单独的给一个设置宽高即影响整行整列）

属性： width/height/bgcolor/align/valign

colspan：合并列（横向合并）

rowspan：合并行（纵向合并）

注意：tr没有宽度

反色原理：

<table border="0" cellspacing="1" bgcolor="black"> <tr bgcolor="white">

六．form表单相关标签

<form>

action：接收的脚本地址

method：提交的方式(get|post)

enctype=”multipart/form-data” (表单文件二进制编码)

application/x-www-urlencoeded 默认

<input>：type：类型/name：名字/value：值/size：大小(可以设置框的长度) width/height

disabled：禁止(无值属性)/checked：选中(默认)/readonly：只读(无值属性)

placeholder：提示文字(html5)

其中type属性的值：

text：文本框（name为下标，value为默认值，不设置值的话只要下标，然后输入值）

    password：密码框  required(非空)

radio：单选框 ( 同一组radio的name值必须相同)

checkbox：复选框 (name的值后面要加[ ] 相当于数组)

submit：提交按钮有提交功能

button：普通按钮没有提交功能 /reset：重置

file：文件域 multiple(一次上传多张(无值属性))

hidden：隐藏域(传递不让用户看见的数据,name value必须有)

select：下拉框

name：名字 / size：下拉个数

disabled：禁止(无值属性)

option：选项（不设置value，也可以提交，就是option中间的文字）

value：值/ disabled：禁止(无值属性)/selected：(默认选中项)

textarea：多行文本域

name：名字 /cols：列数 /rows：行数

disabled：禁止(无值属性)/readonly：只读(无值属性)/maxlength：最大可输入长度 (挨文字选中)

两个提交按钮的区别：

submit具有提交功能，button一般需要和JS套用

七．frameset框架

frameset

cols：分列的定义可以用百分比或者像素，值用英文的逗号隔开(,) *表示剩下的所有

rows：分行的定义

border：边框

frameborder：是否显示边框 yes | no

<iframe name="main" frameborder="0" style="width:800px;height:400px;">这是另一个框架，可以和body一起使用

frame

href：显示的页面url地址

name：名字

scrolling：是否显示滚动条 yes|no

noresize：禁止拖动 (定框架)

例： <frameset rows="100, 600, *">

<frame src="./top.html" noresize/>

<frameset cols="200,*">

<frame src="menu.html" name="left" noresize/>

<frame src="content.html" name="right" noresize/>

src是这个帧中显示的内容，name就是取名字，

</frameset>

<frame src="footer.html" noresize/>

</frameset>

menu.html文件中

用户列表

一点击用户列表，在右边出现userlist.html文件内容（先给帧名字，在用target去跳转）

注意事项：frameset不能和body标签一起使用。

八.HTML5新标签（语义化标签）

1、可以将写在form标签外面的表单元素提交到指定文件中 Password不在form标签里面

<form action="./demo.php" id="formdata" method=""></form>

<input type="password" name="password" value="" form="formdata">

2、设置提交按钮指定的文件位置

<input type="submit" value="提交"formaction="./1.php" formmethod="get">

3、为文本输入框，添加下拉选择项

<input type="text" list="datalist" name="search" />

<datalist id="datalist">

<option>PHP</option>

时间日期

<input type="date" name=""> <br/>

<input type="month" name=""> <br/>

<input type="week" name=""> <br/> 选取一年中的第几周

<input type="time" name=""> <br/>

邮箱:<input type="email" name=""> <br/>

网址:<input type="url" name=""> <br/>

数字:<input type="number" name="" max="10" min="1" step="2"> <br/>

数字:<input type="range" name="" min="1" max="10" step="2"> <br/>

5.视频音频

<video src="./media/fun.mp4" loop controls poster="./1.jpg" width="200"height="200"></video>

<audio src="./media/_WStyle.mp3" controls autoplay loop hidden></audio>

Autoplay:自动播放

Loop：循环播放

Hidden：隐藏标签

九．实体符号

” ” / & & < < / > >

 空格 /   © © × × / ¥ ¥   &hearts 心型

十．滚动字幕

<marquee direction="up" scrollAmount="10" scrollDelay="100" width="600" height="400" >滚动的内容</marquee>

scrollAmount (值越大，滚动越快)

scrollDelay(两步之间的停留时间)

Direction：滚动方向，取值：up、down、left、right

loop：循环滚动的次数

<mark></mark>给文字加亮

<legend>新增用户</legend> 新中夹框标签

阅读全文

0 0