html 超文本标记语言 浏览器可以识别的规则
head 浏览器需要的操作，渲染 body 展示给用户看
title 标题
style css样式
link css 文件
script js文件
html简单尝试
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <!--ie浏览器以最高级别渲染--> 7 <meta name="keywords" content="1,2,3"> 8 <!--网页描述，让搜索引擎的爬虫可以找到--> 9 <meta name="description" content="描述"> 10 11 <title>html</title> 12 <style> 13 h1{ 14 color:red; 15 } 16 </style> 17 <script>alert("拉拉啊啦啦")</script> 18 </head> 19 <body> 20 <h1 id="i1" class="c1 c2 c3" style="font-size:48px">hello world</h1> 21 <!--id 唯一属性值 class 一个或多个类名 style 规定行内样式--> 22 <a href="www.baidu.com"> baidu2</a> 23 24 <!--body里面的常用标签 --> 25 <h1>一级</h1> 26 <!--h2 h3 ...h6--> 27 <h6>六级</h6> 正文 28 正文 29 30 <!--html 里面的换行 里面的换行 空格浏览器会解析成一个空格--> 31 <!--换行 br标签--> 32 这是一段<br>花花 33 <hr> 34 <!-- 画一条线--> 35 <!--一般展示给用户看的话都会标记在p标签--> 36 <p>一段话</p> 37 <b>加粗</b> 38 <i>斜体</i> 39 <u>下划线</u> 40 <s>删除</s> 41 <a href="https://www.baidu.com">链接</a> 42 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1457637924,501903893&fm=27&gp=0.jpg" alt="如果图片链接地址失效，那么我会告诉你一个大概信息"> 43 </body> 44 </html>
特殊符号，标签嵌套，锚点
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1457637924,501903893&fm=27&gp=0.jpg" width="600" height="600" alt="如果图片链接地址失效，那么我会告诉你一个大概信息" title="鼠标移上去的提示"> <!--height高 width宽--> <a href="#b1">锚点跳</a> <a href="#b2">我再跳</a> <!--锚点--> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <hr> <p id="b1">锚点按照id值跳转</p> <a id="b2" href="https://www.baidu.com" target="_blank">_blank我会在一个新的标签页里面打开这个链接</a> <!--一些常用的特殊符号--> <p>a<b</p> <p>a>b</p> <p>这是一个 空格</p> <p>这是一个&符号</p> <p>这是一个版权符号©</p> <p>这是一个® 注册符号</p> <!--特殊符号一般都是&开头 ; 结束--> <hr> <hr> <!--div 和span --> <div>我是div</div> <span>我是span div和span我们是一个空白的标签，没有特殊样式，这意味者我可以添加几乎任何功能和样式</span> <div>区别是 h1...h6,p div hr 都是块级标签</div> <span>a span img u i b s 都是行内标签 ，会在一行显示</span> <!--标签的嵌套--> <div>不要用行内标签包含块级标签</div> <p>p标签不能嵌套p标签</p> <p>p标签不能嵌套div标签</p> </body> </html>
列表 表格格式 掌握
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> </head> <body> <ul type="none"> <li>1</li> <li>1</li> <li>1</li> </ul> <ol type="A" start="2"> <li>1</li> <li>1</li> <li>1</li> </ol> <!--有序列表，可以通过type控制序号的规格--> <!--标题列表--> <dl> <dt>biaoti1</dt> <dd>内容</dd> <dt>biaoti2</dt> <dd>nei1</dd> <dd>nei2</dd> </dl> <table border="1" cellpadding="10" cellspacing="20"> <!--border表格边框，cellpadding 内边距 cellspacing 外边距 --> <thead> <tr> <th>性别</th> <th>爱好</th> <th>姓名</th> </tr> </thead> <tbody> <tr> <td>sylar</td> <td rowspan="2">st</td> <!--合并下面一行--> <td>YI</td> </tr> <tr> <td>male</td> <!--<td>gm</td>--> <td>ZZ</td> </tr> </tbody> </table> <!-- 格式 <table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> table --> </body> </html>
获取用户输入信息 包括lable checked selected 上传文件 获取文本 button submit reset 重置 单选 多选 设置默认 value name 等的作用
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>获取用户输入信息</title> </head> <body> <form action="https://www.baidu.com" method="get" enctype="multipart/form-data"> <label for="i1">用户名</label> <input type="text" id="i1" name="text"> <!--提示，for 和id 关联 点击用户名，自动把焦点移动到对应的input内--> <label>密码： <input type="password" name="password"> </label> <!--用label包含可达到同样的效果--> <input type="date" name="date"> <input type="email" name="email"> <input type="checkbox" name="hobby" value="btball">篮球 <input type="checkbox" name="hobby" value="fo">足球 <input type="checkbox" checked name="hobby" value="bbb">兵乓球 <!--需要加value才能识别--> <hr> <input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" checked name="gender">保密 <!--默认选中--> <hr> <select name="" id=""> <option value="01">bei</option> <option value="02">shang</option> <option value="03" selected>gaung</option> <!--selected 默认选中--> </select> <!--单选 需要value--> <hr> <input type="file" name="avator"> <!--上传文件，在form 表单还需要指定 enctype="multipart/form-data"--> <hr> <input type="button" value="我是一个按钮"> <input type="submit" value="提交"> <input type="reset" value="重置" > <textarea name="" id="" cols="30" rows="10" ></textarea> <!--获取大段的文本--> </form> <!--form 表单提交数据 form 表单包含的信息才会提交 并且用户输入的值必须要有name--> <!--input 标签 text password date email checkbox 勾选 radio 单选按钮 name值一样的才会接收 button一个普通按钮 submit 一个提交按钮 --> </body> </html>