HTML基础知识 

 1 HTML介绍：
 2 什么是 HTML？
 3    HTML 是用来描述网页的一种语言。
 4    HTML 指的是超文本标记语言
 5    HTML 不是一种编程语言，而是一种标记语言，学习HTML就是学习标签（元素）
 6    HTML 标签是由尖括号包围的关键词，比如 <html>
 7    HTML 标签通常是成对出现的，比如 <b> 和 </b>
 8    标签对中的第一个标签是开始标签，第二个标签是结束标签
 9    开始和结束标签也被称为开放标签和闭合标签
10 
11 HTML 文档 = 网页
12    HTML 文档描述网页
13    HTML 文档包含 HTML 标签和纯文本
14    HTML 文档也被称为网页
15    Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
16    浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容.
 1 标签：
 2 标题标签（h1~h6）
 3 段落标签（p）
 4 列表标签（有序列表（ol li）、无序列表(ul li)、自定义列表(dl dt dd)）
 5 div标签（用于分化一个一个区域）
 6 图片标签（用于向页面插入图片）
 7 粗体标签（b/strong  strong用于SEO优化）
 8 斜体标签（i/em  em 用于SEO优化）
 9 超链接标签（a标签）
10 文字标签（span标签）
1 行内（span）和块级（div）区别
2 + 块级元素前后会自动换行  行内元素不会
3 + 块级元素包含行内和块级，行内元素包含文本和其他行内元素（不建议包含块级）
4 + 块级元素可以给宽高  行内元素不能给宽高
5 + 行内元素不能给上下边距，块级元素都可以
1 特殊符号：
2 大于号  &gt;
3 小于号  &lt;
4 &    &amp;
5 空格  &nbsp;
6 空白位  &emsp;
7 版权号  &copy;
 1 表格
 2 表格标签（table）
 3 表头标签（thead）
 4 表身标签（tbody）
 5 表脚标签（tfoot）
 6 caption 表格标题
 7 rowspan  合并行
 8 colspan 和并列
 9 text-align:center  文本居中
10 border-collapse:collapse  边界友好

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11         table{
12             border-collapse: collapse;
13             text-align: center;
14             margin-left: 20px;
15             margin-top: 20px;
16         }
17     </style>
18 </head>
19 <body>
20     <table border="1">
21         <caption><b>学员信息表</b></caption>
22         <thead>
23             <tr>
24                 <th>name</th>
25                 <th>sex</th>
26                 <th>age</th>
27             </tr>
28         </thead>
29         <tbody>
30             <tr>
31                 <td>小泼</td>
32                 <td>女</td>
33                 <td rowspan="2">18</td>
34             </tr>
35             <tr>
36                 <td>无名</td>
37                 <td>男</td>
38                 <!--<td>18</td>-->
39             </tr>
40             <tr>
41                 <td>墨染</td>
42                 <td colspan="2">保密</td>
43                 <!--<td>20</td>-->
44             </tr>
45         </tbody>
46     </table>
47 </body>
48 </html>
表格

表单：
表单是搜索用户数据信息的各种表单元素的集合区域，用于前后台交互方式之一
action  提交时候的地址 默认使用当前页面
method  提交时候的方法 有get和post两种 默认使用get
input标签  表单中使用频率最高的标签
textarea  文本域
text 文本框
password  密码框
radio  单选框


CheckBox 复选框
checked 默认选择
disabled 禁止选择


file  文件选择
hidden   隐藏域
submit 提交
reset 重置
placeholder  提高用户体验度
name  表单中最重要的一个属性  用于前后台交互
readonly 只读
disabled  禁用


select  下拉框
option 下拉框基本标签 有多少个option就有多少个下拉选项
selected  表示选中某个下拉选项
size 表示下拉框显示多少个 默认一个
name  表示下拉框向后台交数据时所使用的名字


fieldset标签  给表单设置分组
legend  设置分组表单的标题
label 提高用户体验度

required  表示字段非空

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11         textarea{
12             resize: none;
13         }
14     </style>
15 </head>
16 <body>
17 <form action="" method="post">
18     <p>账号：<input type="text" name="user" placeholder="请输入用户名"></p>
19     <p>密码：<input type="password" name="pwd" placeholder="请输入密码" required></p>
20     <p>文件上传：<input type="file" name="file"></p>
21     <p>单选框：<input type="radio" name="radio" id="male"><label for="male">男</label>
22     <input type="radio" name="radio" id="female"><label for="female">女</label></p>
23     <fieldset>
24         <legend>兴趣</legend>
25     <p>多选框：
26         <input type="checkbox" name="checkbox" id="climb"><label for="climb">爬山</label>
27         <input type="checkbox" name="checkbox" id="sing"><label for="sing">唱歌</label>
28         <input type="checkbox" name="checkbox" id="play"><label for="play">逛街</label>
29         <input type="checkbox" name="checkbox" id="study"  checked ><label for="study" >学习</label>
30         <input type="checkbox" name="checkbox" disabled id="game"><label for="game">游戏</label>
31     </p>
32     </fieldset>
33     <p><label for="wb">文本域：</label><textarea name="wb" id="wb" cols="30" rows="10"></textarea></p>
34     <p><label for="select" >下拉框：</label><select name="select" id="select" size="2">
35         <option value="0">武汉</option>
36         <option value="1">长春</option>
37         <option value="2">德清</option>
38         <option value="3">杭州</option>
39         <option value="4">成都</option>
40         <option value="5" selected>长沙</option>
41         </select>
42     </p>
43     <p>提交：<input type="submit" value="submit"></p>
44     <p>重置：<input type="reset" value="reset"></p>
45 
46 </form>
47 </body>
48 </html>
表单

 

posted @ 2018-10-14 16:43  kanglun  阅读(255)  评论(0)  编辑  收藏  举报