HTML

标签

p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
文本级标签
div、h系列、li、dt、dd。容器级标签里可以放任何东西。
容器级标签

行内标签

1.在一行内显示

2.不能设置宽高,默认的宽高是内容的宽高

span

strong

<body>
    <strong>你好</strong>  /*加粗*/
</body>
strong

em

倾斜
em

i

倾斜
i

del

a

target: _self 默认 在当前中打开链接地址
   _blank 在空白的页面打开连接地址

外部链接
<a href="http://www.baidu.com" target="_blank">进入百度</a>
锚链接
<a href="new.hhml#top">回到top</a>
<a href="new.hhml#">刷新</a>
<a href="javascript:void(0)">取消链接</a>
a

行内块标签

1.在一行内显示

2.可以设置宽高

img

单标签,图片

alt:当图片显示不出来的时候,代替图片显示的内容。alt是英语 alternate “替代”的意思。

input

块级标签

1.独占一行

2.可以设置宽高,如果不设置宽高,默认宽是父级的100%,高是内容的高

div

div:把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。

<span><div>唯一的区别在于<span>是不换行的,而<div>是换行的。

p

<body>
    <p>这是一个段落</p>
</body>
align='属性值':对齐方式。属性值包括:left、center、right
p标签是一个文本级标签,p里面只能放文字、图片、表单元素。
段落标签p

h1~h6

<body>
    <h1>这是h1</h1>
    <h2>这是h2</h2>
    <h3>这是h3</h3>
    <h4>这是h4</h4>
    <h5>这是h5</h5>
    <h6>这是h6</h6>
</body>
h1~h6

 

ul

无序列表,ul下的子元素只能是li

li

<body>
    <ul>
        <li>这是1</li>
        <li>这是2</li>
        <li>这是3</li>
    </ul>
</body> 
ul
<body>
    <ol>
        <li>这是1</li>
        <li>这是2</li>
        <li>这是3</li>
    </ol>
</body> 
ol

ol

有序列表,ol下的子元素只能是li

dl

定义列表

<body>
    <dl>
        <dt>第一条规则</dt>    <!-- 标题 -->
        <dd>1</dd>       <!-- 描述 -->  
        <dd>2</dd>
        <dd>3</dd>

        <dt>第二条规则</dt>     <!-- 标题 -->
        <dd>4</dd>        <!-- 描述 -->  
        <dd>5</dd>
        <dd>6</dd>
    </dl>
</body> 
dl

 

dt

定义标题

dd

定义描述

form

表单标签用<form>表示,用于与服务器的交互。表单就是收集用户信息的,就是让用户填写的、选择的。

  • name:表单的名称,用于JS来操作或控制表单时使用;
  • id:表单的名称,用于JS来操作或控制表单时使用;
  • action:指定表单数据的处理程序,一般是PHP,如:action=“login.php”
  • method:表单数据的提交方式,一般取值:get(默认)和post

action属性就是表示,表单将提交到哪里。 method属性表示用什么HTTP方法提交,有get、post两种。 

GET方式:
将表单数据,以"name=value"形式追加到action指定的处理程序的后面,两者间用"?"隔开,每一个表单的"name=value"间用"&"号隔开。
特点:只适合提交少量信息,并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。

POST方式:
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点:可以提交海量信息,相对来说安全一些,提交的数据格式是多样的(Word、Excel、rar、img)。

Enctype:
表单数据的编码方式(加密方式),取值可以是:application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

    • Application/x-www-form-urlencoded:默认加密方式,除了上传文件之外的数据都可以
    • Multipart/form-data:上传附件时,必须使用这种编码方式

input

type:
text: 文本输入框
password:密码输入框
file:文件按钮 提交文件的时候一定要用post 一定要给form标签添加 Enctype='multipart/form-data'
submit:提交按钮
button:普通按钮
name:提交到服务器端的key
value: 显示的文本内容,与服务器端的value
placeholder:文本代替

label

for:是与下面的某个表单控件的id属性进行关联

table

表格

一个表格<table>是由每行<tr>组成的,每行是由<td>组成的。

  • colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
  • rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
<body>
    <table border="1">
        <tr>
            <td>张三</td>
            <td>18</td>
            <td></td>
            <td rowspan="3">竖方向合并</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>45</td>
            <td></td>
        </tr>

        <tr>
            <td>小贾</td>
            <td colspan="2">横方向合并</td>
            
        </tr>

    </table>
</body> 
table

 

posted @ 2018-09-17 15:27  YaoSir66  阅读(148)  评论(0编辑  收藏  举报