HTML

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改变。内联标签根据其内容自由收缩,但是大小不能变。

  特殊标记:&lt; &gt;&quot;&copy;&reg;

 

    < >;";©® 圈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>
View Code

  <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条的选项  

 

posted @ 2016-11-15 10:15  gege4105  Views(137)  Comments(0Edit  收藏  举报