HTML(超文本标记语言)

HTML(超文本标记语言)

网页的基本信息

• 、等成对的标签，分别叫**开放标签**和**闭合标签**，单独呈现的标签(空元素)，如

  ---

  ；意为用 / 来关闭空元素

• DOCTYPE：告诉浏览器，我们要使用什么规范

• head：代表网页头部

• body：代表网页主体

• title：网页标题

• meta: 描述性标签，用来描述网站的一些信息 ；一般用来做SEO

网页基本

常用标签

       <h1> h1>
       快捷键(p+tab) <p> p>
     <hr/>
       <br/>
       粗体<strong>strong>            斜体<em><em>
       空格    >:>  <:<  版权符号：©
1
2
3
4
5
6

图像标签

<img src ="path" alt="text" title="text" width="x" height="y"/>

1
2
3

链接标签

<a href="path" target="目标窗口位置">链接文本或图像a>

1
2

超链接

<a name="标记名字">网页显示名称a>
<a href="#标记名字">网页显示名称a>


<a name="标记名字">网页显示名称a> 跳转后的页面
<a href="新页面#标记名字">网页显示名称a>  跳转前的页面


<a href="mailto:邮件地址">网页显示名称a> 
1
2
3
4
5
6
7
8
9
10

行内元素和块元素

• 块元素： 无论内容多少，该元素独占一行 (p、h1-h6…)
• 行内元素：内容撑开宽度，左右都是行内元素的可以在排在一行 (a.strong .em …)

列表标签

• 列表就是信息资源的一种展现形式。他可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快的获取相应的信息

<ol>
  <li>li>
ol>


<ul>
  <li>li>
ul>


<dl>
  <dt>dt>>
  <dd>dd>
dl>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

表格标签

<!--表格 table  行:tr  列: td-->
<!--colspan 跨列  <td colspan=""> </td>-->
<!--rowspan 跨行  <td rowspan=""> </td>-->
    
<table>
  <tr>
    <td> </td>
  </tr>
</table>
    
1
2
3
4
5
6
7
8
9
10

视频和音频

• 视频 video

<video src=" " controls autoplay>audio>
1
2

• 音频 audio

<audio src=" " controls autoplay>audio>
1
2

网页结构分析

• header ： 标题头部区域的内容（用于页面或页面中的一块区域）
• fooder ： 标记脚部区域的内容（用于整个页面或页面的一块区域）
• section： Web页面中的一块独立区域
• article ： 独立的文章内容
• aside ： 相关内容或应用（常用于侧边栏）
• nav ： 导航辅助类内容

iframe内联框架

<iframe src="path" name="mainFrame"> iframe>
1
2

表单

表单语法

<from method="post" action="result.html">
 <p> 名字: <input type="text"name="name">p>
 <p> 密码: <input type="password"name="pass">p>
 <p>
    <input type="submit"name="Button"value="提交"/> 
    <input type="reset"name="Reset"value="重填"/> 
    p>   
from>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

表单元素格式

• type : 指定元素的类型。text、password、Checkbox、radio、submit、rest、file、hidden、image、button，默认值为：text
• name : 指定表单元素的名称
• value : 元素的初始值。type为radio时必须指定一个值
• size ： 指定表单元素的初始宽度。当type 为 text 或 password时，表单元素的大小以字符为单位。对于其他的类型，宽度以像素玩儿单位
• maxlength ： type为text或password时，输入的最大字符数
• checked : type为radio或checkbox时，指定按钮是否被选中

表单基本控件

单选框

     <input type="radio"value=" "name=" ">
1
2

多选框

       <input type="checkbox"value=" " name=" ">
1
2

按钮

       <input type="button"name=" " value=" ">

       <input type="image" src=" ">

       <input type="submit">

       <input type="reset">
1
2
3
4
5
6
7
8

下拉框 列表框

 
<select name="列表名称">
        <option value="选项的值"> option>
        <option value="选项的值"> option>
        <option value="选项的值" selected> option>
        <option value="选项的值">德国option>
select>
1
2
3
4
5
6
7

文本域

<textarea name="textarea"  cols="10" rows="10">文本内容textarea>
1
2

文件域

    <input type="file"name="files">
1
2

简单验证

<p>
    <input type="email" name="email">
p>


<p>
    <input type="url" name="url">
p>


<p>
    <input type="number" name="num" max="100" min="0" step="10">
p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

滑块

<p>
   <input type="range" name="voice" min=" " max=" " step=" ">
p>

1
2
3
4
5

搜索框

<p>搜索：
    <input type="search" name="search">
p>
1
2
3
4

表单的应用

隐藏域：hidden 只读：readonly 禁用：disabled

表单的初级验证常用方法

placeholder：提示信息(一般用于输入框中) required：非空判断 pattern:正则表达式