html文档树形结构图
(图片来自:http://www.cnblogs.com/yuanchenqi/articles/5603871.html)
标签的属性
- 标签以键值对出现。
- 出现在开始或者自闭和标签中。
- 属性的值必须用引号标注。
head标签
<meta>标签
<!--meta标签中有两个属性分别是name和http-equivt。两者对应出现。-->
name可以是keyword或者description。相应的context出现其内容。
例子:
<meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">
<meta name="description"content="这是网站的描述,百度中常出现。">
http-equivt。相当于头文件。从例子中看它的作用。
例子:
<meta http-equiv="Refresh"content="2;URL=https://www.baidu.com"> <!-- 表示2秒后会跳转到百度-->
<meta http-equiv="content-Type"content="text/html;charset=UTF8"> <!-- 表示给浏览器看一下文本格式和编码方式-->
<link>标签
常见的是用来显示每个页面的icon。这里是连接的京东的。
<link rel="icon" href="http://www.jd.com/favicon.ico">
<style>标签
是css语句存放的地方,回来再讲。
<script>标签
是js语句存放的地方,但是存在的上下执行的原因多在body后面。
body标签
基本标签
<hn>:1-6,表示不同大小的标题。
<p>:段落标签,会在段落上下自动有一定的空白。
<b>,<strong>:两者都是加粗标签
<strike>:会有一条中线横穿过去。
<em>:escape master 化身逃跑大师变为斜体。
<sup><sub>:上下角标。
<br>:主动换行。
<hr>:一条水平线传过去。
<div>:是一种没有任何的空白标签,块级标签,用到最多。
<span>:类似于div但是是内联标签。
特点:
block(块)元素的特点
① 总是在新行上开始;
② 高度,行高以及外边距和内边距都可控制;
③ 宽度缺省是它的容器的100%,除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素
inline元素的特点
① 和其他元素都在一行上;
② 高,行高及外边距和内边距不可改变;
③ 宽度就是它的文字或图片的宽度,不可改变
④ 内联元素只能容纳文本或者其他内联元素
总结:块级标签总是占着一整行,但是长宽都可以通过style改变。内联标签根据其内容自由收缩,但是大小不能变。
特殊标记:< >;";©®
< >;";©® 圈c多用在网站下方 圈r是商标用的多。其他的因为跟HTML有重复才存在的。
<img>图像标签
<img src="images/icon.png" height="237" width="27" title="鼠标悬浮在图片上会显示" alt="图片没加载成功时显示">
<!--有的时候网页上图片也可能是背景图片,不是img标签-->
<a>连接标签
<!--所有的连接都是这会标签做的,包括文字和图片-->
<a href="chouti.html"></a>
<label>标签的使用
在数据库中拿到的textare数据的格式也会被显示出来。
列表标签
<ul>: 无序列表 <!--但是每一项前面都会有一个黑点默认的,取消黑点可以用ul的style设置为none,当然还有更多其他的样式。-->
<ol>:有序列表 <!--同上每项前面都有123...-->
<li>:列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
<table>表格标签
1 <table border="1"> 2 <tr> 3 <th>Heading</th> 4 <th>Another Heading</th> 5 </tr> 6 <tr> 7 <td>row 1, cell 1</td> 8 <td>row 1, cell 2</td> 9 </tr> 10 <tr> 11 <td>row 2, cell 1</td> 12 <td>row 2, cell 2</td> 13 </tr> 14 </table>
<border>:表格边框。
<rowspan>:单元格跨越多少行,上下合并,会把多余的挤出去。
<colspan>:单元格跨越多少列,左右合并,会把多余的挤出去。
<tr>:table row
<th>:table head cell
<td>:table data cell
<form>:django下的。
form表单的属性有method属性,有两个属性值为get和post。对应的不同的方法传输数据。post更加安全。get则是附加在URL后。
url 属性表明由哪个URL处理最终传入一个函数中。
enctype 是一个默认值appellation。。。,设置了请求头。当是文件file的时候设置为。。。multipart/form-data
<input>
是一个自闭和的标签,他的属性里的type的属性值决定着input标签的用处。
"button","submit","reset","file","text","checkbox"等分别表示按钮,提交,重写,提交文件,文本框,和对号选择。
其中前三个有value属性对应的出现在图形上的字体内容。后两个有name属性,会以键值对的形式传输数据到后台。
不同是标签value有着不同的表示。
<textarea>
当text框不够用的时候,用这个比较大的。cols是默认多少列,rows是默认多少行。
<select>
属性有name,size,multiple。分别是名字,显示个数,和是多选。
<option>
select条的选项