HTML(1)

HTML

HTML（比较杂）

<body>和</body>之间的文本是可见的页面内容 标签含义：<h1></h1>:标题h1到h6标题逐渐变小

  <p></p>:段落
<a></a>：链接标签，注意使用方式例如： This is a link ​ <img>图像标签，注意使用方式例如： ​ <img src="/i/eg_w3school.gif" width="300"height="120" /> ​ 换行标签 中间没有元素，只起到换行的作用

  <table></table>表格标签
  <hr/>创建水平线标签
<marquee>滚动 ​ <!...这是一个注释...>注释标签 ​ 文本格式化标签：（省略结束标签） ​ <b>粗体 ​ <big>大号字 ​ <em>着重字体 ​ <i>斜体字 ​ <small>小号字 ​ <strong>加重语气 ​ <sub>定义下表字 ​ <sup>定义上表字 ​ <ins>插入字 ​ <del>删除字 ​ “计算机输出”标签（省略结束标签） ​ <code>计算机代码 ​ <kbd>定义键盘码 ​ <samp>定义计算机代码样本 ​ <tt>定义打字机代码 ​ <var>定义变量

               <pre>预格式文本---原样输出
 ​
      引用、引用和术语定义（省略结束标签）
                <abbr>定义缩写 <abbr title="etcetera">etc.</abbr>
                <acronym>定义首字母缩写 <acronym title="World Wide Web">WWW</acronym>（鼠标悬停可以显示完整信息）
                <bdo>定义文字方向 <bdo dir="rtl">Here is some Hebrew text</bdo>（反着输出）
                <blockquote>定义长的引用（增加外边距和换行）
                <q>定义短的引用语（只增加双引号）
                <cite>定义引用、引证（参考文献的引用）
                <dfn>定义一个定义项目
                <address>地址标签
 

   attention:  1.html自动的在标题和段落后面添加空行       
 ​
   name="value":属性在开始标签中定义，如上面的href属性，align="center"标题居中属性（淘汰）
              bgcolor="yellow"背景颜色属性，放在body中（淘汰）
             style属性用于改变元素样式（首选）
                   style="                   style="font-family:verdana"定义字体
                    style="color:red"定义字体颜色
                    style="font-size:20px"定义字体尺寸
                    style="text-align:center"定义标题对齐

　　

​ ​

HTML链接

 
 1 <a href = "url" target = "_blank">link text</a>
 2  <!--target属性定义被链接的文档在何处显示，如果为“_blank”表示新窗口打开-->
 3  <a href="/index.html" target="_top">请点击这里！</a> 
 4  <!--target属性定义被链接的文档在何处显示，如果为“_top”表示到网站的最开始-->
 5 name属性：用来规定锚的名称，通俗来讲，就是一个小的超链接，他可以定位到一个页面的任意一个位置，就相当于轮船，你把锚告诉别人，别人通过锚就找到了你的轮船。
 6 
 7  <a name = "tips">balabalabala....</a>
 8  <!--设置一个锚-->
 9  <a href = "#tips">查看tips</a>
10  <!--调用锚就找到了轮船-->

 

HTML图像

 
 1 <img src = "boat.gif" width = "128" height = "128" alt = "big boat"/>
 2  <!--alt 替换属性，在图片无法正常显示时，显示替换内容；width和height调整图像的尺寸-->
 3  <body background = "/i/eg_background.jpg">...</body>
 4  <!--把图片设为背景-->
 5  <img src = "/i/eg_background.jpg" align = "bottom">balabala...
 6  <img src = "/i/eg_background.jpg" align = "middle">balabala...
 7  <img src = "/i/eg_background.jpg" align = "top">balabala...
 8  <!--align属性设置图片与文字的对齐方式，bottom就是文字和图片的下方对齐，默认时bottom-->
 9  <img src = "/i/eg_background.jpg" align = "left">balabala...
10  <img src = "/i/eg_background.jpg" align = "right">balabala...
11  <!--align = "left"表示图像会浮动到文本的左侧，right同理-->
12  <a href = "url"><img border = "0" src = "/i/eg_background.jpg"/></a>
13  <!--就是用图像作为链接，border属性定义图像的边框，默认为0-->

 

<img>标签和<map>标签结合可以设置图像映射，就是图像上的点可以点击

 
 1 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
 2  <!--<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。-->
 3  <map name="planetmap" id="planetmap">
 4    <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
 5    <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
 6    <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
 7      <!--coords属性定义可点击的区域的坐标，坐标值与shape有关；shape属性定义区域的形状-->
 8      <!--图像的左上角坐标为"0,0"；圆形：shape="circle"，coords="x,y,z（半径）"
 9          矩形：shape="rectangle"，coords="x1,y1,x2,y2（左上角和右下角顶点的坐标）"-->
10  </map>

 

HTML表格

/<table>标签来定义，一行一行的输出就可以了，行用<tr>,列用<td>(table data),在表格中可以包含文本、图片、列表、段落、表单、水平线、表格等，很丰富！

 1  <table border="1">
 2  <caption>我的标题</caption>
 3  <tr>
 4  <th>Heading</th>
 5  <th>Another Heading</th>
 6  </tr>
 7  <tr>
 8  <td>row 1, cell 1</td>
 9  <td>row 1, cell 2</td>
10  </tr>
11  <tr>
12  <td>&nbsp;</td>
13  <td>row 2, cell 2</td>
14  </tr>
15  </table>
16  <!--border属性定义表格边框宽度；<caption>设置标题，就是在表格正上方显示的标题；<th>标签设置表头，默认粗体居中；&nbsp;表示空格，用空格占位，避免少边框的情况-->
17 其他的有用设置：
18 
19  <table border="1">
20  <tr>
21    <th>姓名</th>
22    <th colspan="2">电话</th>
23  </tr>
24  </table>
25  <!--colspan="2"就是跨两列，合并两列，说明实际上一共有三列，下一行要对应三列输出-->
26  <table border="1">
27  <tr>
28    <th>姓名</th>
29    <td>Bill Gates</td>
30  </tr>
31  <tr>
32    <th rowspan="2">电话</th>
33    <td>555 77 854</td>
34  </tr>
35  <tr>
36    <td>555 77 855</td>
37  </tr>
38  </table>
39  <!--rowspan="2"就是跨两行，那么下一行输出时就可以少数出一列-->
40  ​
41  <table border = "1" cellpadding = "10"></table>
42  <!--使用cellpadding属性来创建单元格内容和边框之间的空白-->
43  <table border = "1" cellspacing = "10"></table>
44  <!--使用cellspacing属性来增加单元格之间的距离-->
45  <table style = " font-size:20px"></table>
46  <!--设置背景颜色和字体大小-->
47  <table background = "/i/eg_bg_07.gif" style = "text-align:center" ></table>
48  <!--设置背景图像,以及输出格式-->
49  <table frame = "box"></table>
50  <table frame = "above"></table>
51  <table frame = "below"></table>
52  <table frame = "hsides"></table>
53  <table frame = "vsides"></table>
54  <!--frame属性是对整个表格进行边框设置，box为整个表格外面加一个边框（盒子），同理above只在上面加一个边框其他类似-->

 

HTML列表

 1  <ul>
 2      <li>balabala</li>
 3      <li>balabala</li>
 4  </ul>
 5  <!--无序列表，默认小黑点标注-->
 6  <ol start = "50">
 7      <li>balabala</li>
 8      <li>balabala</li>
 9  </ol>
10  <!--有序列表，数字标注，默认从1开始,加了start后就从start开始计数-->
11  <dl>
12  <dt>Coffee</dt>
13  <dd>Black hot drink</dd>
14  <dt>Milk</dt>
15  <dd>White cold drink</dd
16  </dl>
17  <!--定义列表，<dt>为列表项，<dd>为列表项定义，相当于每一列表项后跟一个解释，这个是没有小黑点或者数字这些东西的-->

 

 

关于列表的设置：

1  <ul style="list-style-type:circle"></ul>
2  <!--改变无序列表的标注类型，circle：空心圆圈；disc:去角的实心小圆点；square：实心小黑方块-->
3  <ol style = "list-style-type:A"></ol>
4  <!--改变有序列表的标注类型，A：大写字母排序；a：小写字母排序；I:罗马字母排序；i：小写罗马字母排序-->
5  <!--列表嵌套例子略，万物可套就完了！-->

 

HTML表单

 1  <form>
 2      form elements..
 3  </form>
 4 /<input>元素为表单的最重要元素：
 5 
 6  <form>
 7  first name:<br/>
 8      <input type = "text" name = "firstname" size="20">
 9  last name:<br/>
10      <input type = "text" name = "lastname">
11  </form>
12  <!--表单类型为文本，文本的默认宽度为20个字符-->
13  <form>
14      <input type = "radio" name = "sex" value = "male" checked>Male
15      <br/>
16      <input type = "radio" name = "sex" value = "female">Female
17  </form>
18  <!--表单类型为单选按钮，checked表示预选-->
19  <form>
20      <input type="checkbox" name="vehicle" value="Bike">I have a bike
21      <br>
22      <input type="checkbox" name="vehicle" value="Car">I have a car 
23  </form>
24  <!--定义复选框！-->
25  <form action = "ction_page.php" method = "GET">
26      first name:<br/>
27      <input type = "text" name = "firstname" value = "mickey">
28      <br/>
29      last name:<br/>
30      <input type = "text" name = "lastname" value = "mouse">
31      <br/><br/>
32      <input type = "submit" value = "submit">
33  </form>
34  <!--表单类型为提交按钮，text中value的意思是如果没填，默认为value；submit中value意思是提交的按钮名字为value(如果省略，默认是submit)；
35  action是表单处理程序，没有的话无法处理数据;method属性规定在提交表单时所用的HTTP方法（GET或POST）
36  另外：如果要正确的被提交，每个输入字段必须设置一个name属性-->

 

何时使用 GET？ 您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的： 何时使用 POST？ 您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。

 1  <form action="action_page.php">
 2  <fieldset>
 3  <legend>Personal information:</legend>
 4  First name:<br>
 5  <input type="text" name="firstname" value="Mickey">
 6  <br>
 7  Last name:<br>
 8  <input type="text" name="lastname" value="Mouse">
 9  <br><br>
10  <input type="submit" value="Submit"></fieldset>
11  </form>
12  <!--<fieldset>元素组合表单中的相关数据，<legend>元素为<fieldset>元素定义标题-->

 

form所有可能的属性：

1  <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
2  ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
3  .
4  form elements
5   .
6  </form>

 

属性描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

HTML其他表单元素：（我发现表单元素不用加form也可以发挥作用，那其他的呢？）

 1  <select name="cars">
 2  <option value="volvo">Volvo</option>
 3  <option value="saab">Saab</option>
 4  <option value="fiat" selected>Fiat</option>
 5  <option value="audi">Audi</option>
 6  </select>
 7  <!--下拉列表 其中，selected属性设置了默认的被选选项，如果没有此属性，默认第一个-->
 8  <textarea name="message" rows="10" cols="30">
 9  The cat was playing in the garden.（这是预显示的文字）
10  </textarea>
11  <!--定义多行输入字段（文本域），并且这个文本框可以随意变换大小！-->
12  <button type = "button" onclick = "alert('hello world!')">click me!</button>
13  <!--有一个叫做click me！的按钮，点击后，浏览器弹出hello world!-->
14  <form action="/demo/demo_form.asp">
15  ​
16  <input list="browsers" name="browser">
17  <datalist id="browsers">
18    <option value="Internet Explorer">
19    <option value="Firefox">
20    <option value="Chrome">
21    <option value="Opera">
22    <option value="Safari">
23  </datalist>
24  <input type="submit">
25  </form>
26  <!--用户在输入数据时会看到预定义的下拉列表，注意：<input>元素的list属性必须引用<datalist>元素的id属性；和selected不同的是，selected只能选择不能输入-->

 

HTML输入类型和属性：

难道！？？

HTML的输入只能靠表单？你看，文本框、选择框、提交都是表单！

 
  1 <form>
  2   User name:<br>
  3  <input type="text" name="username">
  4  <br>
  5   User password:<br>
  6  <input type="password" name="psw">
  7  </form> 
  8  <!--password 字段中的字符会被做掩码处理（显示为星号或实心圆）。-->
  9  <form action="/demo/demo_form.asp">
 10    数量（1 到 5 之间）：
 11    <input type="number" name="quantity" min="1" max="5">
 12    <input type="submit">
 13  </form>
 14  <!--输入数字类型，并且有范围（浏览器不支持的类型都默认text）-->
 15  <form action="/demo/demo_form.asp">
 16  请输入 1980-01-01 之前的日期：<br>
 17  <input type="date" name="bday" max="1979-12-31"><br><br>
 18  请输入 2000-01-01 之后的日期：<br>
 19  <input type="date" name="bday" min="2000-01-02"><br><br>
 20  <input type="submit"> 
 21  </form>
 22  <form action="action_page.php">
 23    Select your favorite color:
 24    <input type="color" name="favcolor" value="#ff0000">
 25    <input type="submit">
 26  </form>
 27  <form action="/demo/demo_form.asp" method="get">
 28    Points:
 29    <input type="range" name="points" min="0" max="10">
 30    <input type="submit">
 31  </form>
 32  <!--用于应该包含一定范围内的值的输入字段。
 33  ​
 34  根据浏览器支持，输入字段能够显示为滑块控件。-->
 35  <p>
 36  根据浏览器支持：<br>
 37  当您填写输入字段时会弹出日期选择器。
 38  </p>
 39  ​
 40  <form action="/demo/demo_form.asp">
 41    生日（月和年）：
 42    <input type="month" name="bdaymonth">
 43    <input type="submit">
 44  </form>
 45  <p>
 46  根据浏览器支持：<br>
 47  当您填写输入字段时会弹出日期选择器。
 48  </p>
 49  ​
 50  <form action="action_page.php">
 51    Select a week:
 52    <input type="week" name="year_week">
 53    <input type="submit">
 54  </form>
 55  ​
 56  <p>
 57  根据浏览器支持：<br>
 58  当您填写输入字段时会弹出日期选择器。
 59  </p>
 60  ​
 61  <form action="/demo/demo_form.asp">
 62    请选取一个时间：
 63    <input type="time" name="usr_time">
 64    <input type="submit">
 65  </form>
 66 属性：
 67 
 68  <form action="">
 69   First name:<br>
 70  <input type="text" name="firstname" value="John" readonly>
 71  <br>
 72   Last name:<br>
 73  <input type="text" name="lastname">
 74  </form> 
 75  <!--readonly 属性规定输入字段为只读（不能修改）：-->
 76  <form action="">
 77   First name:<br>
 78  <input type="text" name="firstname" value="John" disabled>
 79  <br>
 80   Last name:<br>
 81  <input type="text" name="lastname">
 82  </form> 
 83  <!--disabled 属性规定输入字段是禁用的。
 84  ​
 85  被禁用的元素是不可用和不可点击的。
 86  ​
 87  被禁用的元素不会被提交-->
 88  <form action="">
 89   First name:<br>
 90  <input type="text" name="firstname" maxlength="10">
 91  <br>
 92   Last name:<br>
 93  <input type="text" name="lastname">
 94  </form> 
 95  <!--maxlength 属性规定输入字段允许的最大长度：
 96  size属性只是规定了输入框的大小，如果超过仍可以接受数据-->
 97  <form action="action_page.php" autocomplete="on">
 98     First name:<input type="text" name="fname"><br>
 99     Last name: <input type="text" name="lname"><br>
100     E-mail: <input type="email" name="email" autocomplete="off"><br>
101     <input type="submit">
102  </form>
103  <!--autocomplete 属性规定表单或输入字段是否应该自动完成。
104  ​
105  当自动完成开启，浏览器会基于用户之前的输入值自动填写值。-->
106 表单的初级验证：
107  <input type = "text" name = "username" placeholder = "请输入姓名" required>
108  <!--placeholder属性用来提示要输入的内容！-->
109  <!--required属性限制了文本非空！-->
110  <!--另外还有一个，pattern 正则表达式判断，需要的时候去百度“常用正则表达式”-->

 

 

 

posted @ 2021-01-31 22:43  yyComeOn  阅读(64)  评论(0)  编辑  收藏  举报