HTML

1.什么是HTML？如何开发HTML？如何运行HTML?

　　（1）HTML:Hyper Text Markup Language(超文本标记语言).由大量的标签组成，每一个标签都有开始标签和结束标签。

　　超文本：流媒体、图片、声音、视频。。。。。。

　　（2）HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm\

　　（3）直接采用浏览器打开HTML文件就是运行。

2. 基本标签

　　(1)<head>

　　　　<title>网页的标题</title>

　　　</head>

　　(2)<body>网页的主体</body>

　　(3)<p>段落</p>

　　(4)<h1>标题字</h1>、<h2>标题字</h2>、<h3>标题字</h3>、<h4>标题字</h4>、<h5>标题字</h5>、<h6>标题字</h6>

　　(5)<br> 换行

　　(6) <hr> 横线

　　(7)<pre>预留格式</pre> ------->即显示的格式按照pre中写的那种格式来显示

　　(8)<del>删除字</del>

　　(9)<ins>插入字</ins>

　　(10)<b>粗体字</b>

　　(11)<i>斜体字</i>

　　(12)右上角加字:10<sup>2</sup>------->10的2次方

　　(13)右下角加字:10<sub>m</sub>

　　(14)<font>字体标签</font>

3.实体符号

格式：以&开始，以;结束

　　（1）空格：  例：a b------->a b

　　（2）小于号：&lt；例：a &lt b;----->a<b

　　（3）大于号 :&gt；例：a &gt b;----->a>b

4.表格

（1）行合并

（2）列合并：对删除左边列还是右边列没有要求，因为都在同一个行里面

<!--

　　　　-->

----------------------------------------------------------------------------

<!--

　　　　-->

　　　　效果一样

（3）<th>自动居中并加粗</th>

（4）thead标签、tbody标签、tfoot标签

　　将表格切分成head、body、foot等好几个模块，便于操作。

6.背景颜色和背景图片

7.图片

8.超链接

注：href后面可以是绝对路径，也可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径

（1）超链接的特点：有下划线；鼠标停留在上面显示小手形状；点击超链接后可以跳转页面。

（2）超链接的target属性：

（3）超链接的作用：通过超链接可以从浏览器向服务器发送请求。浏览器向服务器发送数据--->request; 服务器向浏览器发送数据----->response

B/S结构的系统，每一个请求都会对应一个响应。

9.列表

（1）有序列表

（2）无序列表

10.表单

10.1 什么是表单

10.2 表单的作用

　　表单显现后，用户填写表单，点击提交按钮后，将数据提交给服务器。

10.3 表单的创建-----使用form标签

　　（1）action:用来指定表单提交数据的服务器对象的地址

　　（2）input ：提交

　　（3）表单提交数据的形式

注：表单写了name属性的一律会提交给服务器，不想提交某一项就别写name属性。文本框和密码框的value不需要程序员写，用户输入什么，就是什么。

11.用户注册表单的实现

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6     </head>
 7     <body>
 8         <form action="http//:www.123.com" method="post"><!-- post将提交的信息隐藏起来        -->
 9             <!--
10                 作者：1824118112@qq.com
11                 时间：2021-01-05
12                 描述：
13                 
14                 form表单的method属性：
15                 get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
16                 post:采用post方式提交的时候，用户提交的信息不会显示在浏览器的地址栏上。
17                 注：默认get
18             -->
19             用户名
20             <input type="text" name="username"><br>
21             密码
22             <input type="password" name="user password"><br>
23             确认密码
24             <input type="password"><br>
25             性别
26             <input type="radio" name="gender" value="M">男
27             <input type="radio" name="gender" value="F">女
28             <br>
29             兴趣爱好
30             <input type="checkbox" name="interest" value="travling"> 旅游
31             <input type="checkbox" name="interest" value="watching files"> 看电影
32             <input type="checkbox" name="interest" value="reading"> 读书
33             <input type="checkbox" name="interest" value="chooking"> 烹饪<br>
34             学历
35             <select name="grade">
36                 <option value="GZ">高中</option>
37                 <option value="DZ">大专</option>
38                 <option value="BK">本科</option>
39                 <option value="SS">硕士</option>
40                 <option value="BS">博士</option>
41             </select>
42             <br>
43             简介
44             <textarea row="10" cols="5" name="introduce"></textarea><br>
45             <input type="submit" value="注册">
46             <input type="reset" value="重置">
47          </form>
48          <!--
49              作者：1824118112@qq.com
50              时间：2021-01-05
51              描述：
52              超链接也可以提交信息，但是信息已经在代码中写死，是不能变的，即用户无法修改，只有程序员可以修改。默认：get方式
53          -->
54          <a href="http://www.123.com/save?username=TOM&password=123">提交</a>
55         
56     </body>
57 </html>

12.下拉列表实现多选

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>下拉列表实现多选</title>
 6     </head>
 7     <body>
 8         <select multiple="multiple" size="2">
 9             <!--
10                 作者：1824118112@qq.com
11                 时间：2021-01-05
12                 描述：
13                 multipe 支持多选（多选时要按住ctrl），size设置显示条目数量
14             -->
15             <option>北京</option>
16             <option>上海</option>
17             <option>广州</option>
18             <option>深圳</option>
19             
20             
21         </select>
22         
23     </body>
24 </html>

13.file控件

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>file控件</title>
 6     </head>
 7     <body>
 8         <input type="file"/>
 9     </body>
10 </html>

14.隐藏域hidden控件

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>file控件</title>
 6     </head>
 7     <body>
 8        <form action="http://www.123.com">
 9             <input type="hidden" name="userid" value="111"/>
10             <!--
11                 作者：1824118112@qq.com
12                 时间：2021-01-06
13                 描述：
14                 隐藏域：网页上看不到，但是表单提交的时候数据会自动提交给服务器
15             -->
16             用户代码<input type="text" name="usercode"/>
17             <input type="submit" value="提交">
18        </form>
19     </body>
20 </html>

点击提交后：

15.readonly与disabled

readonly和disabled相同点都是只能读不能修改；

不同点是readonly可以提交给服务器，disabled不能提交数据，即使有name属性也不会提交

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>readonly  disabled</title>
 6     </head>
 7     <body>
 8         <form action="http://www.123.com">
 9             <!--
10                 作者：1824118112@qq.com
11                 时间：2021-01-06
12                 描述：
13                 readonly和disabled相同点都是只能读不能修改；
14                 不同点是readonly可以提交给服务器，disabled不能提交数据，即使有name属性也不会提交
15             -->
16             用户代码<input type="text" name="usercode" value="11" readonly/><br>
17             用户姓名<input type="text" name="username" value="Tom" disabled/>
18             <br>
19             <input type="submit" value="提交数据"/>
20             
21             
22         </form>
23     </body>
24 </html>

16.input控件的maxlength

作用：设置文本框中可输入的字符的数量

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>input控件的maxlength</title>
 6     </head>
 7     <body>
 8         <input type="text" maxlength="3" />
 9     </body>
10 </html>

17. html中元素的id属性

　　在html文档中，任何元素（节点）都有id属性，id属性是该元素（节点）的唯一标识，所以在同一个html文档中id值不能重复。

　　表单提交数据的时候只和name有关，与id无关。

　　id的作用：为了更方便的获取某个元素。

注：javascript主要就是对这棵DOM树上的节点进行增删改的。DOM指的是Document。

18.div和span

（1）div和span都可以称为"图层"

（2）作用是保证页面可以灵活布局

（3）最早的网页是采用table进行布局的，但是table不灵活，所以现代网页开发中多使用div进行布局

（4）div和span是可以定位的，只要定下div的左上角的x轴和y轴坐标即可。

posted @ 2021-01-04 23:38 L1998 阅读(194) 评论(0) 收藏举报

刷新页面返回顶部

L1998

HTML

公告