html head 标签 body标签
1.head标签
<!DOCTYPE html> <!--文档规范标准--> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <!--设置为UTF-8解决中文乱码-> <meta name="keywords" content="火影,huoying,火影忍者"> <!--关键字设置,用于关键字搜索--> <meta name="description" content="有一群人为了保护村子里的和平。。。。。。"> <!--内容描述,显示在搜索后的内容简介--> <!--<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">--> <!--2秒之后跳转到其他页面 --> <title>网站</title> <!--网站标题--> <link rel="icon" href="//www.jd.com/favicon.ico"> <!--网站标题前面的图标--> </head> <body> <h1>hello</h1> </body> </html>
2.body标签
1)基本标签:
<hn>:n的取值范围1-6,从大到小,表示标题
<p>:段落标签,内容换行,上下文都有一行空白
<b><strong>内容 加粗
<strike>内容加中线
<em>内容变斜体
<sub>下标, <sup>上标
<br>换行
<hr>水平线
<div> 块
特殊字符:> < " © ® > < " © ®
块级标签:<p><h1><table><ol><ul><form><div>
内联标签:<a><input><img><sub><sup><textarea><span>
2)图形标签:
<img src="1.jpg" height="100" width="100" alt="不见了" title="美女">
3)超链接标签:
<a href="http://www.baidu.com" target="_blank">baidu.com</a> target设置跳转网页的方式
锚:
<a href="#abcd">跳转到div</a> 跳转到ID为abcd的标签
4)列表标签:
<ul> <li>无</li> <li>序</li> <li>列</li> <li>表</li> </ul> <ol> <li>有</li> <li>序</li> <li>列</li> <li>表</li> </ol> <dl> 定义列表 <dt>湖北</dt> <dd>武汉</dd> <dd>宜昌</dd> </dl> <dl> <dt>湖南</dt> <dd>长沙</dd> <dd>岳阳</dd> </dl>
5)表格标签:
<table border="1" cellpadding="10" cellspacing="10" > cellpadding 内边距 ,cellspacing 外边距 <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>15</td> <td>男</td> </tr> <tr> <td>李四</td> <td>16</td> <td>女</td> </tr> <tr> <td>王五</td> <td>17</td> <td>女</td> </tr> </tbody> </table>
合并单元格 rowspan(合并行) colspan(合并列)
6)表单标签
表单用于向服务器传输数据
1.表单属性有 action (提交服务器的地址)method(提交的方式) get/post
get:有长度限制,不安全,在url上显示
post:无长度限制,安全,在url上显示
2.表单元素
text 文本输入框
password 密码输入框
radio 单选框
checkbox 复选框
submit 提交按钮
button 按钮 (配合js使用)
file 提交文件 form中要添加 enctype="multipart/form-data"
<!-- name 是给服务器识别的,id 是给CSS,JS识别的--> <!--value 的作用--> <!-- type = 'button' ,'reset','submit' 定义按钮上显示的文本--> <!-- type = 'text' ,'password','hidden' 定义输出字段的初始值--> <!-- type = 'checkbox' ,'radio','image' 定义与输出相关连的值-->
<select> 下拉选择标签 name : 提交服务器的键 ,size :显示出来的个数,multiple:multiple多选
<optgroup> 添加分组
<option> value:提交给服务的值 selected:selected 下拉默认被选中
<textarea> 多行文本输入框,name:提交服务器的key,cols:文本显示多少列 rows:文本显示多少行
<label> 将标签与表单元素关联
<label for="username">用户名</lable>
<input id="username" type='text'>
<fieldset> 区域划分
<fieldset>
<legend>个人简介</legend>
<input type='text'>
</fieldset>
代码:
<body> <form action="body.html" method="post" enctype="multipart/form-data"> <p>ID:<input name="ID" type="text" value="110" readonly disabled></p> <p>用户名:<input name="user" type="text"></p> <p>密码:<input name="pass" type="password"></p> <p>男<input type="radio" name="sex" value="1" checked> 女<input type="radio" name="sex" value="2"></p> <p>篮球<input type="checkbox" name="hobby" value="1"></p> <p>足球<input type="checkbox" name="hobby" value="2"></p> <p>排球<input type="checkbox" name="hobby" value="3"></p> <p><input type="button" value="btn"></p> <p><input type="file" name="file_name"></p> <p><input type="submit" value="提交"></p> <select name="province" multiple size="4"> <optgroup label="中国"> <option value="1">湖北</option> <option value="2">湖南</option> <option value="3">福建</option> </optgroup> <optgroup label="美国"> <option value="4">墨西哥</option> <option value="5">洛杉矶</option> <option value="6">旧金山</option> </optgroup> </select> <p>评论:<textarea name="comment" cols="15" rows="5"></textarea></p> <label for="username">姓名</label> <input id='username' type="text"> <fieldset> <legend>个人简介</legend> <input type="text"> </fieldset> </form> </body>优质内容筛选与推荐>>