<!DOCTYPE html>#####网页渲染标准 <head> #(1)head标签里的meta标签 #####meta属于head标签，meta标签有两个属性：http-equiv属性和name属性 <meta charset="UTF-8"> <meta name="keywords" content="it培训,达内"> <meta name="description" content="老男孩培训机构是由一个....创建的"> <meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> <meta http-equiv="content-type" charset=UTF8"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateTE7" /> #(2)非meta标签 <title>oldboy</title> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> #将css代码引入html <script src="hello.js"></script> #将js代码引入html #(3)html注释 <!--<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">--> </head> #(4)body标签 <body> <h1>hello world</h1> #####hn标签：n取值范围为1-6；从大到小，用来表示标题 <p>鹅鹅鹅</p> <p>曲项向天歌</p> <p>白毛浮绿水</p> #####p标签功能：换行加间隙 红掌拨清波</br> #####br标签：换行 <b>飞流直下三千尺</b>#####b标签：加粗 <strong>飞流直下三千尺</strong>#####strong标签：加粗 <strike>hello</strike>#####strike标签：文本上加横线 <em>斜体</em>#####em标签：斜体 <div>hello</div>#####div标签：无任何效果，div标签属于块级标签 <span>hello</span>#####span标签和div标签效果一样，区别：Span标签属于内联标签 </body> #(5)块级标签和内联标签 块级标签特点：独占一行，宽度缺省时，他的容积为100%，除非人为设定一个宽度；他可以容纳内联元素和其他块元素 内联标签特点：和其他元素同占一行，宽度就是他的文字和图片的宽度，不可改变 常见块级标签：<p>,<h1>,<table>,<ol>,<ul>,<form>,<div> 常见内联标签：<a>,<input>,<img>,<sub>,<sup>,<textarea>,<span> #(6)image标签 <img src="要显示图片的路径" alt="图片没有加载成功时的提示" title="鼠标悬浮时的提示信息" width="200px" height="200px"> #(7)a标签：超链接标签 <a href="http://www.xiaohuar.com" target="_blank">校花网</a>#####点击文本“校花网”，跳转到href指定的网址 a标签实现功能-跳转回顶部： div<id="abc">顶部</div> a<href="#abc">返回顶部</a> #(8)列表标签 <ul>:无序列表 <ol>:有序列表 <li>:列表中的每一项 <dl>:定义列表 <dt>列表标题 <dd>列表项 #(9)表单标签<table> (a)表单用于向服务器传输数据 (b)表单能够包含input元素，比如文本字段，复选框，单选框，提交按钮等 (c)表单还可以包含textarea、select、fieldset和label元素 (d)表单属性： HTML表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与web服务器的交互。表单标签，要提交的所有内容都应该在该标签中 action的内容为server端路径,表示表单提交到哪儿，一般指向服务器端的一个程序，程序接收到表单提交过来的数据(即表单元素值)作相应处理；method:表单的提交方式Post/get. get:提交的键值对放在地址栏中url后面；安全性相对较差；对提交内容的长度有限制。 post:提交的键值对不在地址栏；安全性相对较高；对提交内容的长度理论上无限制。 (e)表单标签之<input>标签 ###<input>标签的属性和对应的值 type： text 文本输入框 password 密码输入框 radio 单选框 checkbox 多选框 submit 提交按钮 button 按钮(需要配合js使用.) file 提交文件(form 表单需要加上属性enctype="multipart/form-data")，上传文件注意两点：1，请求方式必须是post 2.enctype="multipart/form-data" name: 表单提交项的键.注意和id的区别：name属性是和服务器通信时使用的名称；而id属性是浏览器端使用的名称，该属性主要是 为了方便客户端编程，而在css和javascript中使用的 value: 表单提交项的值，对于不同的输入属性，value属性的用法也不相同： type="button","reset","submit"-定义按钮上的显示文本 type="text","password","hidden"-定义输入字段的初始值 type="checkbox","radio","image"-定义与输入相关联的值 checked:radio和checkbox默认被选中 readonly:只读 disabled:禁用，又所有的input都能用 ############################################################# <form action="http://127.0.0.1:8080/index" method="">#####action的内容为server端路径，method为提交数据的方式，有两种（get,post） <p>用户名<input type="text" name="username"></p> <p>密码<input type="password" name="password"></p> <p>爱好: 音乐<input type="checkbox" name="hobby" value="music" checked="checked">电影<input type="checkbox" name="hobby" value="movie"></p> <P>性别： 男<input type="radio" name="gender" value="men">女<input type="radio" name="gender" value="women"></p> <P><input type="reset" value="重置"></p> <p><input type="file" name="put_file" ></p>#####上传文件 <p><input type="submit" value="提交注册"></p> input标签，其中name属性是传递给server端的键，最后传递的字典为 {"username":"输入的text值","password":"输入的password值","hobby":"勾选的value值","gender"："勾选的value值"} </form> ############################################################## (f)表单标签之<select>标签 ###<select>下拉列表标签对应的属性 name: 表单提交项的键 size: 选项个数 multiple： multiple <option> 下拉列表中的选项 属性： value:表单提交项的值 selected: 下拉列表选项默认被选中 <optgroup>为每一项加上分组 ############################################################## 省 <select name="province" size="2" > <optgroup label="河北省"> <option value="handan">邯郸</option> <option value="langfang">廊坊</option> <option value="tangshan" selected="selected">唐山</option> </select> (g)表单标签之<testarea>文本域标签 ###<testarea>属性 name: 表单提交项的键 cols: 文本域默认有多少列 rows: 文本域默认有多少行 (h)<lable> <label for="www">姓名</label> <input id="www" type="text"> #####for和id内容相同，姓名才能和"text"关联 (10)表格标签 border: 表格边框. cellpadding: 内边距 cellspacing: 外边距. 像素 百分比.（最好通过css来设置长宽） <tr>: table row <th>: table head cell <td>: table data cell rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格） <th>: table header <tbody>(不常用): 为表格进行分区. ############################################### <table border="1px"> <thead> <tr> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> #######################################################