码迷,mamicode.com
首页 > Web开发 > 详细

50-Web基础-HTML

时间:2018-05-02 13:14:28      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:定位   作用   set   规范   包含   关键字符   put   上传   没有   

1、什么是HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页,Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。

2、标签

2.1 基础概念

  • HTML标签是HTML语言中最基本的单位,标签不区分大小写,由尖括号包裹关键字构成,例如<html>test</html> 叫做html标签,<div>test</div>叫做div标签,以此类推。
  • 类似<meta>这种就叫做自闭合标签,类似<a></a>就叫做主动闭合标签。
  • 标签可以嵌套,例如<div><div></div></div>。
  • 标签存在的意义:定位操作、CSS操作、让JS操作更简单。
  • 所有的标签分为块级标签和行内标签(又叫做内联标签)
    • 块级标签:占满一行,如常见的H系列标签,P标签,div标签。
    • 行内标签(内联标签):只占元素长度大小,如span标签。

2.2 常用的标签

  <!DOCTYPE> 定义遵循的文档类型,如<!DOCTYPE html> 则代表遵循html文档规范。

  2.2.1 head中的常见标签:

 1 <head>
 2     <meta charset="UTF-8">  <!-- meta为自闭合标签, charset属性定义字符编码 -->
 3     <meta http-equiv="Refresh" content="3">  <!-- 3秒自动刷新 -->
 4     <meta http_equiv="Refresh" content="3;Url=http://edu.51cto.com">  <!-- 3秒自动跳转百度 -->
 5     <meta name="keywords" content="吃鸡,关键字2,关键字3">  <!-- 给搜索引擎用的关键字 -->
 6     <meta name="description" content="网站描述信息">  <!-- 描述当前网站是干嘛的 -->
 7     <meta http_equiv="X-UA-Compatible" content="IE=EmulateIE8;IE=IE7">  <!-- 主动兼容IE8和IE7 -->
 8     <title>标签</title>  <!-- head内部的标签只有title可见 -->
 9     <link rel="shortcut icon" href="image/favicon.ico">  <!-- 小图标显示 -->
10 </head>

  2.2.2 body中的常见标签:

  2.2.2.1 <h>-</h>标签:h标签用来定义标题

<body>
    <h1>Druid</h1>  <!-- h标签用来定义标题,字体从上至下依次缩小 -->
    <h2>Druid</h2>
    <h3>Druid</h3>
    <h4>Druid</h4>
    <h5>Druid</h5>
    <h6>Druid</h6>
</body>   

    2.2.2.2 <p>-</p>标签:p标签用来定义段落

1 <body>
2     <p>第一段落</p>  <!-- p标签用来控制段落,段落间有间距 -->
3     <p>第二段落</p>
4     <p>第三段落</p>
5 </body>

2.2.2.3 <span>-</span>标签:span标签为白板标签(行内标签)

1 <body>
2     <span>第一行</span>  <!-- 行内标签(内联标签) -->
3     <span>这里紧跟第一行,不会换行</span>
4 </body>

2.2.2.4 <div>-</div>标签:div标签为白板标签(块级标签)

1 <body>
2      <div>第一行</div>  <!-- 块级标签 -->
3      <div>这里就要换行了</div>
4 </body>

2.2.2.5 <a>-</a>标签:a标签用来定义链接和锚

用来定义链接:单击文字即可跳转至链接

<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>  <!-- target="_blank"在新的标签页打开百度,若不加则在原页打开 -->
</body>

用来定义锚:作为锚点,单击文字即可跳转至对应的ID处

<body>
    <a href="#1">第一章</a>  <!-- #为关键字符,创建指向锚的链接,后面的编号要和想跳转的地方保持一致 -->
    <a href="#2">第二章</a>
    <a href="#3">第三章</a>
    <div style="height: 600px;" id="1">
        第一章的内容
    </div>
    <div style="height: 600px;" id="2">
        第二章的内容
    </div>
    <div style="height: 600px;" id="3">
        第三章的内容
    </div>
</body>
 1     <a href="#1">第一章</a>  <!-- #为关键字符,创建指向锚的链接,后面的编号要和想跳转的地方保持一致 -->
 2     <a href="#2">第二章</a>
 3     <a href="#3">第三章</a>
 4     <a href="#4">第四章</a>
 5     <div style="height: 600px;" id="1">
 6         第一章的内容
 7     </div>
 8     <div style="height: 600px;" id="2">
 9         第二章的内容
10     </div>
11     <div style="height: 600px;" id="3">
12         第三章的内容
13     </div>
14     <a name="4">第四章的内容</a>  <!-- 对锚进行命名 -->

2.2.2.6 <img />标签:img标签用来定义图片

1 <body>
2     <img src="1.png" />
3 </body>
1 <body>
2     <a href="http://www.baidu.com">
3         <img src="1.png" title="图片" style="height: 300px;width: 300px" alt="图片"/>
4     </a>  <!-- 单击图片直接跳转至指定url;title属性用于鼠标悬浮显示信息;alt属性在图片不能显示的时候显示对应的文字信息 -->
5 
6 </body>   

    2.2.2.7 <br />标签:<br /> 元素是一个空的 HTML 元素,用来换行

1 <body>
2     <div>换行<br />测试</div>
3 </body>

2.2.2.8 <form> </form>标签:HTML表单用于收集用户输入,form标签用来定义HTML表单。HTML表单又包含表单元素:input、select和textarea。

    <input />标签(元素):

1 <body>
2     <form action="" method="">  <!-- form为表单标签,用来向后台提交数据;action属性用来指定服务器url;method用来指定get或者post -->
3         <input type="text" />  <!-- 单行文本输入框 -->
4         <br />
5         <input type="password" />  <!-- 会隐藏真实字符 -->
6         <input type="button" value="没用" />  <!-- button默认情况下无用 -->
7         <input type="submit" value="登录" />  <!-- submit才能提交表单 -->
8     </form>
9 </body> 
 1 <body>
 2     <form action="http://localhost:8888/index" method="post">  <!-- get会将输入内容拼接成url提交给后台,post会将内容放到数据中提交给后台 -->
 3         <input type="text" name="user" />  <!-- name属性用来定义字典的key -->
 4         <br />
 5         <input type="password" name="pwd" />
 6         <!-- 打包成字典{"user": "用户输入的用户名", "pwd": "用户输入的密码"}发给后台 -->
 7         <input type="button" value="没用" />
 8         <input type="submit" value="登录" />
 9     </form>
10 </body>
<body>
    <form enctype="multipart/form-data">  <!-- enctype="multipart/form-data"该属性用来上传文件 -->
        <div>
            用户名:<input type="text" name="user" />
            <p>请选择性别:</p>
                男:<input type="radio" name="sex" value="1" checked="checked" />  <!-- radio为单选框,如果没有name或者name不相同,那么就可以多选 -->
                女:<input type="radio" name="sex" value="2" />  <!-- 这里的value用于给后台传数据;checked用来设置默认值 -->
            <p>爱好:</p>
                篮球:<input type="checkbox" name="favor" value="1" />  <!-- checkbox为复选框 -->
                足球:<input type="checkbox" name="favor" value="2" />  <!-- 这里的name用于后台批量获取数据 -->
                羽毛球:<input type="checkbox" name="favor" value="3" />
                台球:<input type="checkbox" name="favor" value="4" />
                网球:<input type="checkbox" name="favor" value="5" />
            <p>技能:</p>
                写代码:<input type="checkbox" name="skill" value="1" checked="checked" />
                修车:<input type="checkbox" name="skill" value="2" />
            <p>上传文件:</p>
                <input type="file" name="filename" />  <!-- type="file"用来上传文件,真实的传文件依赖form表单属性enctype -->

        </div>
        <input type="reset" value="重置" />  <!-- 重置除默认值以外的值 -->
        <input type="submit" value="提交" />
    </form>
</body>   

<select> </select>标签(元素):select标签定义下拉列表,option标签定义待选项,列表通常会把首个选项显示为被选选项,能够通过添加 selected 属性来定义预定义选项。

 1 <body>
 2     <form>
 3         <div>
 4             <select name="city">
 5                 <option value="1">北京</option>
 6                 <option value="2">上海</option>
 7                 <option value="3">广东</option>
 8                 <option value="4">深圳</option>
 9                 <option value="5" selected="selected">成都</option>
10             </select>  <!-- selected="selected"为默认值 -->
11             <input type="submit" value="提交" />
12         </div>
13         <div>
14             <select name="city" size="10">
15                 <option value="1">北京</option>
16                 <option value="2">上海</option>
17                 <option value="3">广东</option>
18                 <option value="4">深圳</option>
19                 <option value="5" selected="selected">成都</option>
20             </select>  <!-- size用来设置显示的行数 -->
21             <input type="submit" value="提交" />
22         </div>
23         <div>
24             <select name="city" size="10" multiple="multiple">
25                 <option value="1">北京</option>
26                 <option value="2">上海</option>
27                 <option value="3">广东</option>
28                 <option value="4">深圳</option>
29                 <option value="5" selected="selected">成都</option>
30             </select>  <!-- multiple属性用于多选 -->
31             <input type="submit" value="提交" />
32         </div>
33         <div>
34             <select name="city">
35                 <optgroup label="北京市">
36                     <option value="1" selected="selected">北京</option>
37                 </optgroup>
38                 <optgroup label="四川省" />
39                     <option value="2" selected="selected">成都</option>
40                     <option value="3">绵阳</option>
41                 </optgroup>
42                 <optgroup label="河北省" />
43                     <option value="4" selected="selected">石家庄</option>
44                     <option value="5">保定</option>
45                 </optgroup>
46             </select>  <!-- optgroup属性用于组合相关选项 -->
47             <input type="submit" value="提交" />
48         </div>
49     </form>
50 </body>

<textarea> </textarea>标签(元素):textarea标签用来定义多行输入

1 <body>
2     <div>
3         <textarea name="key">
4             这里的文本作为默认值
5         </textarea>  <!-- textarea标签用来定义多行输入,name还是作为Key -->
6     </div>
7 </body>

  

3、注释

HTML语言注释用<!-- 注释 -->,CSS中用/*注释*/

 

 

50-Web基础-HTML

标签:定位   作用   set   规范   包含   关键字符   put   上传   没有   

原文地址:https://www.cnblogs.com/Druidchen/p/8979156.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!