HTML学习---基础知识学习

1.1. HTML

1、为什么要有HTML？

    "Hello"

    "<h1>Hello</h1>"

    - 浏览器渲染时使用一套HTML规则，

    - 学习规则

2、服务器端写HTML时，

在任何语言的WEB框架中：html就做模版

    - .html

    - .tpl   template

    - .chmtl

3、发送请求和相应请求时

请求：请求头 + 请求内容

响应：

4、HTML规则

    - html/head/body/title/meta

    - div/p/a/h/span/b/br/hr/em/ul/ol/li/img/table

    - input/form/textarea/select

    - style/script/link

HTML, htyper text markup language 即超文本标记语言

超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

标记语言: 标记（标签）构成的语言.

标签的构成和其属性

标签分类：闭合标签和非闭合标签
           闭合标签：<h1></h2>
           自闭和标签：<hr/>
标签属性：
        通常是以键值对的形式出现<h1 style='color:red'>China</h1>
           只能出现在开始标签和自闭和标签
           属性值只能小写，且带着引号
         属性名和属性值一致的时候，直接写属性名即可，例如,readonly
标签分类：所有的标签统分为：
    块级标签：<p><h1><table><ol><ul><form><div>
         总是在新行上开始，每次占用一整行的内容；
         宽度缺省是它的容器的100%，除非设定一个宽度。
        它可以容纳内联元素和其他块元素
内联标签：<a><input><img><sub><sup><textarea><span>
        和其他元素都在一行上；根据文本的大小占用大小
        宽度就是它的文字或图片的宽度，不可改变
        内联元素只能容纳文本或者其他内联元素
特殊字符：&quot；   < &gt；&quot；©®

实例包含：HTML基本组成，基本标签[快标签，内联标签的使用]，图形标签，超链接标签，列表标签

  1 <!-- 这里是告诉浏览器， 引用W3的最新标准.历史上有2种浏览器渲染方式 -->
  2 <!DOCTYPE html>
  3 <html>
  4 <head>
  5     <!--设定字符编码-->
  6   <meta charset="UTF-8">
  7     <!--设定名称-->
  8   <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
  9     <!--http-equiv，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容-->
 10     <!-- 设定2秒后自动跳转百度-->
 11   <meta http-equiv="Refresh" content="20000;URL=https://www.baidu.com">
 12   <!-- meta http-equiv="Refresh" content="2"-->
 13       <!-- 这里是作浏览器的兼容性处理-->
 14   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 15     <!--网站内容的描述信息，便于搜索引擎查找信息-->
 16   <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
 17     <!--网站的关键词，便于搜索引擎抓取关键字-->
 18   <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,DV,相机,数码,配件,手表,存储卡,京东" />
 19    <!--非Mate标签,包括script和link-->
 20     <!--这里是引用网站的logo-->
 21   <link rel="icon" href="//www.jd.com/favicon.ico" type="image/x-icon" />
 22     <!--暂时不会-->
 23   <link rel="search" title="京东JD.com" href="//misc.360buyimg.com/mtd/pc/common/conf/search.xml" type="application/opensearchdescription+xml" />
 24 <script>
 25     alert(window.top.document.compatMode)    <!--显示浏览器渲染效果-->
 26 </script>
 27     <style>
 28                  #h0 {
 29              color: orangered;
 30              height: 300px;
 31              width: 800px;
 32              font-family: Arial;
 33              background: lightpink;
 34         }
 35                 #h1{
 36             color: blue;
 37             height: 300px;
 38             width: 800px;
 39             font-family: Arial;
 40             background: palegreen;
 41         }
 42                 #h2 {
 43             color: rebeccapurple;
 44             height: 300px;
 45             width: 800px;
 46             font-family: Arial;
 47             background: greenyellow;
 48         }
 49     </style>
 50 </head>
 51 <body>
 52    <h1>这个是好标签，共计6个，h1~h6</h1>
 53    <p>这里是P标签，有换行和加空白行的作用</p>
 54    <br/>  <!--添加换行-->
 55    <hr/>  <!--添加一个横线-->
 56    <p><del>文字添加中线【推荐使用】</del></p>
 57    <p><strike>文字添加中线【不推荐使用】</strike></p>
 58    <p><b>这里个加粗标签</b></p>
 59    <p><em>斜字体</em></p>
 60    <p><I>斜字体2</I></p>
 61    <p>上角标2<sup>3</sup>=8</p>
 62    <p>特殊字符-空格:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;大于符号 &lt; 小于符号：&gt; 版权符号: &copy; 著作人：&reg; </p>
 63    <p>下角标H<sub>2</sub>0</p>
 64     <!--div主要是用来引用CSS文件的，本身除了换行外[块级标签]不具有任何的格式-->
 65    <div style="color: rebeccapurple">hello div</div>
 66    <!--span是一个内联标签，写多少  用多少，内联标签是跟着文本走的，默认不具有换行操作-->
 67    <span style="color:royalblue">hello span</span><br>
 68    <!--图片标签，注意属性应用-->
 69     <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=825738955,2683699723&fm=27&gp=0.jpg"
 70          height="200px" width="400px" alt="黄沙百战穿金甲,不破楼兰终不还" title="愿你心无所畏，勇往直前"><br>
 71    <!-- a标签有2个作用： 超链接  +  锚[通过#id实现]
 72        这里用作超链接使用, __blank表示单独开一个页签-->
 73    <a href="https://www.baidu.com/" target="_blank" title="百度一下，你就知道">百度</a> <hr>
 74    <!--这里用作锚使用，注意元素都是用#来标示的-->
 75    <a href="#h0" target="_self">神话</a>
 76    <a href="#h1" target="_self">我是谁</a>
 77    <a href="#h2" target="_self">警察故事</a>
 78    <div id="h0"><a href="http://www.1905.com/vod/play/85426.shtml?__hz=55a7cf9c71f1c9c4&ref=baidu1905com" target="_blank">神话</a>
 79      <p>无序列表的学习</p>
 80        <ul>
 81         <li>苹果</li>
 82         <li>香蕉</li>
 83         <li>句子</li>
 84        </ul>
 85    </div>
 86    <div id="h1"><a href="http://www.iqiyi.com/v_19rrkgxf34.html?vfm=2008_aldbd&fc=828fb30b722f3164&fv=p_02_01" target="_blank">我是谁</a>
 87    <p>有序列表的学习</p>
 88    <ol>
 89         <li>一年级</li>
 90         <li>二年级</li>
 91         <li>三年级</li>
 92     </ol>
 93    </div>
 94    <div id="h2"><a href="http://www.le.com/ptv/vplay/1561263.html" target="_blank">警察故事</a>
 95     <p>自定义列表的学习</p>
 96        <dl>
 97            <dt>第一章</dt>
 98             <dd>神话</dd>
 99            <dt>第二章</dt>
100            <dd>我是谁</dd>
101            <dt>第三章</dt>
102            <dd>警察故事</dd>
103        </dl>
104    </div>
105 <!--table表格的使用
106   table属性： cellpadding: 内边距    cellspacing: 外边距.
107   <tr>: table row
108     <th>: table head cell，有属性[rowspan:  单元格竖跨多少行, colspan:  单元格横跨多少列（即合并单元格）]
109     <td>: table data cell
110  -->
111 <table border="1"  cellpadding="2" cellspacing="2">
112     <tr>
113         <th colspan="3">水果</th>
114         <th>学生</th>
115     </tr>
116     <tr>
117         <td>苹果</td>
118         <td>小学生</td>
119     </tr>
120     <tr>
121         <td>香蕉</td>
122         <td>初中生</td>
123     </tr>
124 </body>

View Code

表单的操作

 1 <!DOCTYPE html> 
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">  
 5     <title>黄沙百战穿金甲，不破楼兰终不还</title>
 6 </head>
 7 <body>
 8     <!--表单操作-->
 9     <!--form标签里面的method方法主要我们用post和get的2种方法-->
10       <!--  get: 1.提交的内容以键值对拼接的字符串的形式放在地址栏中url后面.以&拼接
11                   2.安全性相对较差[内容在浏览器框中出现].
12                   3.对提交内容的长度有限制.4. 浏览器默认是get
13            post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
14         -->
15     <form name="do_send" method="post" action="要提交的URL地址">
16         <!--这里添加了name属性，name是给服务器看的,id的唯一标识是给客户端看的-->
17         <!--有了name属性之后，发送的内容就是键值对的形式了：username='hhh'-->
18         <!--label点击文字，也可以进入对应的input框,利用id来进行关联-->
19         <label for="username" >姓名</label>&nbsp;&nbsp;<input id="username" type="text" name="username" ><br>
20         性&nbsp;别&nbsp;&nbsp;
21      <!--这里使用了value来接收radio选中的内容,使用checked来选择默认的值-->
22         男<input type="radio" name="sex" id="male"  value="male" checked>
23         女<input type="radio"name="sex" id="female" value="female"><br>
24         <label for="acc" >账号</label>&nbsp;&nbsp;<input id='acc' type="text" name="account" ><br>
25         <label for="pass" >密码</label>&nbsp;&nbsp;<input id="pass" type="password" name="password"><br>
26         爱&nbsp;好&nbsp;&nbsp;
27         <!--这里使用了value来接收复选框选中的内容-->
28          <input type="checkbox" name="hobby" id="basket" value="basket" checked>篮球
29          <input type="checkbox" name="hobby" id="soccer" value="soccer">足球
30          <input type="checkbox" name="hobby" id="binghu" value="binghu">冰壶<br>
31         <!-- readonly: 只读. text 和 password-->
32         输入框&nbsp;&nbsp;<input type="text" readonly><br>
33         居住地&nbsp;&nbsp;
34         <!--这里将name属性给了select标签，option里面的value保存真实值 multiple属性可以实现多选择的效
35             size表示页面最多显示2个,滚动条实现其他的选择。 optgroup用来实现分组
36         -->
37         <select name="province" multiple="multiple" size="5">
38             <optgroup label="山西省">
39                 <option value="大同" selected>大同</option>
40                 <option value="廊坊">廊坊</option>
41                 <option value="朝阳">朝阳</option>
42             </optgroup>
43             <option value="BeiJing">北京市</option>
44             <option value="Hainan">海南省</option>
45             <option value="HaiBei">河北省</option>
46         </select><br>
47         <fieldset>
48             <legend>备注</legend>
49             <!--多行栏-->
50                 <!--备注：&nbsp;&nbsp;<br>-->
51                 <textarea title="备注" cols="80" rows="3">简介</textarea><br>
52         </fieldset>
53  <!--  文件操作，第一：必须使用post的方式提交；第二使用enctype的multpart实现多段传送；enctype 表示form文件分成多个进行传递[防止占一次上传文件占用内存太大]，必备参数,文件以键值对的形式上传到后台，后台保存到一个特定对象中，我们通过对对象 进行操作实现文件的再写入，达到上传的目的 -->
54         请选择&nbsp;&nbsp;<input type="file" formenctype="multipart/form-data"><br>
55         <input type="submit" value="提交">&nbsp;&nbsp;
56         <input type="reset"  value="重置">
57     </form>
58 </body>
59 </html>

View Code

总结一下：

value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同：

type="button", "reset", "submit" - 定义按钮上的显示的文本

type="text", "password", "hidden" - 定义输入字段的初始值
type="checkbox", "radio", "image" - 定义与输入相关联的值　

input标签中默认：value=on;

HTTP协议

posted @ 2018-07-29 15:41 小a玖拾柒阅读(574) 评论(0) 编辑收藏举报

刷新页面返回顶部