如果用户访问动态资源,服务器首先将动态资源转换为静态资源,并将其发送给浏览器
概念:HyperTextMarkupLanguage:超文本标记语言
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title></title> </head> <body> </body> </html>
1,<!DOCTYPE html> 声明文档为html类型 lang=en /zh-CN 定义页面为英文或者中文,不区分大小写
如:<meta charset="utf-8" /> 设置编码环境
<meta http-equiv="refresh" content = "30"> 每30秒刷新页面
单标签: 开始 标签和结束标签写在一起 如 <br /> <img />
标签的嵌套:
标签的学习
<html> <head> <title> <body> <!DOCTYPE html>
<!-- 标题标签 --> <h1>标题1</h1> <h2>标题1</h2> <h3>标题1</h3> <h4>标题1</h4> <h5>标题1</h5> <h6>标题1</h6> <!-- 段落标签P --> <p>段落标签</p> <p>段落标签</p> <div>div标签</div> <div>div标签</div> <!-- 换行 --> <br /> <!-- 水平线 --> <hr > <hr color="red"> <hr width="200px"> <hr size="7" color="aqua"> <hr width="200px" align="right" color="red">
<!-- 含有样式的标签 --> <b>字体加粗</b> <i>斜体</i> <center>居中</center> <font color="red" size="7" face="宋体">字体</font>
2,RGB() rgb(值1,值2,值3) 值的取值范围 0-255
rgb(0,0,255) :蓝色 --> r=0,g=0,b=255
3,#值1值2值3: 16进制的取值方式,3个值也是对应的rgb
<!-- 图片标签 --> <img src="img/book.jpg" width="200px" alt="表示替换的文本"> <!-- 绝对路径 --> <!-- 相对路径 ./ ../ --> <img src="../../抽奖/img/1.jpg" alt="">
<!--列表 --> <!-- 无序列表 --> <ul type="circle"> <li>北京</li> <li>上海</li> <li>南京</li> </ul> <!-- 有序列表 --> <ol type="I"> <li>北京</li> <li>上海</li> <li>南京</li> </ol> <!-- 自定义 --> <dl> <dt> 城市</dt> <dd>北京</dd> <dd>上海</dd> <dd>南京</dd> </dl>
<a href="http://www.baidu.com">链接到百度</a> <a href="test.html">跳转页面</a> <a href="mailto:1111111@qq.com">联系我们</a> <a href="#top">回到顶部</a> <a href="http://www.baidu.com"><img src="img/book.jpg" width="100px" alt=""></a> <a href="http://www.baidu.com" target="_blank">链接到百度</a> <a href="http://www.baidu.com" target="_self">链接到百度</a>
<table width="1000px" border="1px" cellspacing="0px" cellpadding="10px"> <caption>标题</caption> <tfoot> <tr> <th >Header</th> <th>Header</th> <th>Header</th> <th>Header</th> <th>Header</th> </tr> </tfoot> <tr bgcolor="aquamarine"> <td colspan="3">Data</td> <td align="center">Data</td> <td>Data</td> <!-- <td>Data</td> --> <!-- <td>Data</td> --> </tr> <tr> <td bgcolor="bisque">Data</td> <td rowspan="3">Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <!-- <td>Data</td> --> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <thead> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </thead> <tbody> </tbody> </table>
form标签定义了一个供用户输入的html表单,可以声明一个范围,这个范围代表了采集用户数据的范围
<form action="http://www.baidu.com" method="post"> 用户名: <input type="text" name="username"> <br> 密码: <input type="password" name="password" ><br> <input type="submit" value="提交"/> </form>
action:指定提交数据的url(表示数据要提交到的地方)
get:请求的参数会在地址栏中显示,url的长度是有限制的,get方法是不安全的
post:请求的参数不会在地址栏中显示,会封装在请求体中,请求参数没有大小的限制,post方法比较安全
注意:如果表单中的数据想要被提交,需要在表单中加一个name属性
input :定义了输入的控件,可以通过修改type属性的值,从而改变元素展示的样式
<form action="#" method="get">
<label for="user">用户名:</label>
<input id="user" type="text" name="username"> <br>
密码: <input type="password" name="password" ><br>
性别: <input id="man" type="radio" name="gender"> <label for="man">男</label> <input type="radio" name="gender">女 <br>
爱好: <input id="bas" type="checkbox" name="hobby"/>
<label for="bas">打篮球</label> <input type="checkbox" name="hobby"/> 踢足球 <input type="checkbox" name="hobby"/> 看电影
<input type="checkbox" name="hobby"/> 学习 <br>
文件 : <input type="file"/> <br>
按钮 : <input type="button" value="按钮" /> <br>
颜色: <input type="color" /> <br>
时间: <input type="date" /> <br>
邮箱: <input type="email" /> <br>
图片: <input type="image" src=""> <br>
自我介绍 : <textarea rows="5" cols="10"></textarea> <br>
籍贯: <select name="city"> <option value="nj">南京</option> <option value="sh">上海</option> <option value="hz">杭州</option> </select> <br> <input type="submit" value="提交"/> </form>
<h1>注册页面</h1> <table width="300px" > <tr> <td width="100px"> 用户名: </td> <td width="200px"> <input type="text" /> </td> </tr> <tr> <td width="100px"> 密码: </td> <td width="200px"> <input type="password" /> </td> </tr> <tr> <td width="100px"> 邮箱: </td> <td width="200px"> <input type="email" /> </td> </tr> <tr> <td width="100px"> 手机号: </td> <td width="200px"> <input type="text" /> </td> </tr> <tr> <td width="100px"> 性别: </td> <td width="200px"> <input type="radio" name="gender" />男 <input type="radio" name="gender" />女 </td> </tr> <tr> <td width="100px"> 爱好: </td> <td width="200px"> <input type="checkbox" name="hobby" />唱歌 <input type="checkbox" name="hobby" />打球 <input type="checkbox" name="hobby" />旅游 </td> </tr> <tr> <td width="100px">籍贯</td> <td width="200px"> <select> <option value ="">南京</option> <option value ="">上海</option> </select> </td> </tr> <tr> <td width="100px">个人介绍:</td> <td width="200px"> <textarea rows="4" cols="25"></textarea> </td> </tr> <tr> <td align="center" colspan="2"> <input type="checkbox" /> 是否同意本公司的协议 </td> </tr> <tr> <td align="center" colspan="2"> <input type="submit" value="注册"> </td> </tr> </table>
使用方式: ftp://admin:123456@192.168.1.1/xxx.pdf
使用方式: file:///C:/windows/system/win32.dll
http:超文本传输协议 Hyper Text Transfer Protocol 用来从万维网的服务器传输超文本到本地浏览器中的传输协议
1,仅仅可以省略结束标签的元素有:p,li,dt,dd,rb,rt,rtc,rp,thead,tbody,tfoot
tr,td,th,optgroup,option,colgroup
2,绝对没有结束标签的元素有:area,base,br,col,command,embed,hr,img,input,
keygen,link,menuitem,meta,param,source,track,wbr
3,可以将开始标签和结束标签一起省略的元素:html,head,body,colgroup,tbody
<html>,<head>,<title>,<style>,<meta>,<base>,<body>,
<h1>~<h6>,<p>,<br>,<hr>,<div>,<span>
<b>,<label>,<small>,<em>,<i>,<sub>,<sup>,<bdo>
<abbr>,<address>,<blockquote>用于定义块引用,<q>,<code>,<cite>
<dfn>,<del>,<ins>,<kbd>,<pre>,<samp>,<var>
download:此属性只是浏览器下载URL而不是导航到它,因此提示用户将其保存 为本地文件
media:此属性规定目标URL是为什么类型的媒介/设备进行优化的
1,新增的文档结构元素,如<header>,<footer>,<aside>,<nav>
time 用于显示被标注的内容是日期或者时间,采用24小时制,会用到以下2个属性
pubtime:这个属性指是time元素中的日期时间是文档的发布日期
progress:用于表示一个进度条,常用于下载进度,加载进度等
标签: 4080连接器2p3p间距连接器th矩形电连接器