常见的html总结

最新推荐文章于 2023-01-04 20:53:55 发布

vinkuan

最新推荐文章于 2023-01-04 20:53:55 发布

阅读量142

点赞数

分类专栏： html 文章标签： javascript 特效实例前端 html

本文链接：https://blog.csdn.net/vinkuan/article/details/107142135

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于editplus编码问题，先查看IE（editplus默认）的编码模式（也可编好html代码，点击，右击查看编码），右击查看编码，点击tools菜单下的preference，再点击files，出现默认文本编码，此编码要与IE浏览器的保持一致。保存html文档时，也要选择编码方式。一般全都选择系统默认。

1 html介绍

1.1 html

html是超文本标记语言，能统一网络上的文档格式，用于制作网页。html标签控制网络中的各种资源，并通过控制标签的属性来实现数据样式的变化。

1.2 规范

一个html文件有开始标签<html> 和结束标签</html>；html内部包含两部分内容<head></head>,<body>网页内容</body>；不区分大小写；一般的标签都有开始和结束标签，但有些标签单独存在，如换行<br/>。

2 文字标签和注释标签

文字标签<font></font> ，属性 size = "1"（范围1~7，超过7还是7），color = "red"/"#66cc66"。

注释标签

3 标题标签、水平线标签和特殊字符

标签标签 <h1></h1> ...<h6></h6> ；水平线标签<hr/>，属性 size表示粗细，color

特殊字符：对特殊字符转义

<	>	空格	&	"	注册符R	版权符C
<	>		&	"	®	©

4 列表标签

<dl> <dt> 标题</dt> <dd>具体内容</dd> </dl>，dl(定义列表definition list)dt(definition term)dd(definition description)

<ol> <li>具体内容</li> </ol> , ol有序列表；dl属性：type = "1"/"a"/"i"

<ul><li>具体内容</li></ul>,ul无序列表，ul属性type = "disc"(默认实心圆)/"circle"(空心圆)/"square"（实心方块）

5 图像标签

注意：上层目录可用../表示

6 超链接标签

链接资源 <a href = "链接到资源的路径"> 内容 </a>，属性target = "_blank"/"_self"/"#"；在新窗口打开服务器响应/在当前面打开（默认）/无反应。href:hypertext reference。 target也可以写框架中页面的名称。
定位资源定义页面中一个位置 <a name = "top"> 顶部</a> ; 回到这个位置<a href = "#top">回到顶部</a>
<pre> 空格不会折叠，并保留格式 </pre>，pre：preformatted

7 表格标签

可以对数据进行格式化，使数据显示清晰

<table> <caption> ... </ caption> <th><td></td></th> <tr><td></td></tr> </table>，caption:表格标题，已弃用，th:table header cell，效果居中加粗，tr:table row，td:table data cell。

table的属性：

border来显示一个带有边框的表格，分配给 border 属性的值必须为1或空字符串(“")。此属性不会控制边框的样式。边框的样式由CSS控制。
bordercolor属性 - 可以设置边框颜色；
cellspacing属性定义表格单元格之间的空间；
cellpadding属性表示单元格边框与单元格内容之间的距离；
width（宽）和height（高）属性设置表格宽度和高度，可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

tr,td设置显示方式align = "left"/"center"/"right"，已过时，用css。

td的属性：

colspan，跨列；
rowspan，跨行。

8 表单标签

可以向服务器传输数据，<form> </form>，属性：

action = "xxx"，将表单中的输入数据传送到 "xxx" 的页面；
method = "post"/"get"(默认方式)，表单提交的方式。post和get有何区别？
enctype = "multipart/form-data"/"text/plain"：指定浏览器如何编码数据并交给服务器，前者表示此编码用于将文件上传到服务器，后者表示此编码因浏览器而异
targrt 默认行为是用响应服务器替换页面，该属性来更改此行为，工作方式与超链接上的target属性相同

文本输入<input type = "text" /> 密码输入<input type = "password" />

单选输入 <input type = "radio" /> ，name属性必须有，且值相同，这意味着浏览器会将它们视为一个组。选择其中一个单选按钮将取消选择其他两个。 value属性设置在提交表单时要发送到服务器的数据值。以name = value 的格式发送。

复选输入：<input type = "cheakbox" /> name属性必须有，且值相同。必须要有value值。

文件输入：<input type="file" />

隐藏输入：<input type="hidden" />，要将数据项发送到服务器而不向用户显示，请使用隐藏的输入元素。

按钮输入：<input type = "submit" value = "submit" />，用于提交表单；<input type="reset" value="Reset Form" />，用于重置表单；<input type="button" value="My Button" />，不执行任何操作，与js一起使用。

图片输入（提交）<input type = "image" src = "xxx"/>

选择输入（下拉输入），option属性selected默认选择。

 <select name="fave">
          <option value="A">Apples</option>
          <option value="B">Batch</option>
          <option selected value="C">C</option>
          <option value="S">SQL</option>
 </select>

文本域输入

<textarea cols="20" rows="5"  name="story">
</textarea>

注意：发布表单时，表单的name属性的值不会发送到服务器。此属性仅在客户端的DOM操作中有用，并且不像输入元素上的name属性那样重要。如果输入元素没有name属性，则在提交表单时，用户输入的数据将不会发送到服务器。单选和复选有默认选择，用checked，输入元素必须提供值用required，

<form>
	手机号码:<input type = "text" name = "number"/><br/>
	创建密码:<input type = "password" name = "pwd"><br/>
	性别:<input checked type = "radio" name = "sex1" value = "male"/> 男
         <input type = "radio" name = "sex1" value = "male"/> 女 <br/>
	爱好：<input checked type = "checkbox" name = "hob" value = "basketball"/> 篮球 
         <input type = "checkbox" name = "hob" value = "football"/> 足球 
         <input type = "checkbox" name = "hob" value = "running"/> 跑步<br/>
	文件：<input name = "url" type = "file"><br/>
	生日：<select name = "birth">
				<option value = "0"> 请选择 </option>
				<option selected value = "1990"> 1990 </option>
				<option value = "1991">1991 </option>
		</select> <br/>
	自我描述：<textarea name = "description" cols = "20" rows = "5"> 
			 </textarea> <br/>
	隐藏项: <input type = "hidden"/> <br/>
	<input type = "submit" value  = "注册"/>
</form>

9 其他标签

<b> 加粗</b> , <u>下划线</u> , <s>删除线</s>, <i>斜体</i> <pre>原样输出</pre>，<sub>上标</sub>，<sup>下标</sup>，<div>自动换行</div>，<span>在一行显示</span>，<p>段落标签，比br多一行</p>

u：underlined，sub：subscripted，sup：superscripted；pre：preformatted

10 头标签和框架标签

头标签：title，base，meta，link

title标签：定义了不同文档的标题；base：设置超链接的基本设置；meta：为搜索引擎定义关键词；每3秒刷新当前页面；为网页定义描述内容；定义网页作者等；link标签用于链接到样式表。

<html>
    <head>
	    <title>html</title>
        <meta name="Keywords" content="html,css,js">
<!-- <meta http-equiv = "refresh" content="3;url = http://www.baidu.com" /> -->
        <base target = "_blank" />
    </head>
    <body>
	    <h1> 头标签 </h1>
	    <a href = "http://www.baidu.com">链接1</a>
	    <a href = "http://www.baidu.com">链接2</a>
	    <a href = "http://www.baidu.com">链接3</a>
    </body>
</html>

框架标签：frameset，frame（html5不支持）

<frameset>标签在一个页面中设置一个或多个框架，用<frameset></frameset>代替了<body></body>，不能出现在body标签里。

name属性命名每个框架。

<html>
<head>
	<title> HTML示例</title>
</head>
	<frameset rows = "100,*">
		<frame name = "bottom" src = "b.html">
		<frameset cols = "50%,*">
		<frame name = "left" src = "b.html">
		<frame name = "right" src = "b.html">
	</frameset>
	</frameset>
</html>