web前端-html
1.html简介
超文本标记语言 ,由各种标签组成 ,定义了网页的结构
2.html标签
标签规则
1.块级标签可以包含任意标签 ，用于布局
2.行内标签不建议包含块级标签 ，用于显示内容
标签分类
1.行内标签 ，位于同一行不会换行 ，而不能设置宽高 ，默认宽高由内容撑起
a ，span ，b ，strong
2.行内块标签 ，位于同一行不换行的标签 ，可以设置宽高
img ， input
3.块级标签 ，独占一行 ，可以设置宽高，默认是父盒子100%大小（padding内填充 border边框 margin外边框）
div ，ul，li，ol，h1-6 ，from，p(仅包含文本表单图片信息)
常见标签
head
子标签：title 选项卡显示内容
meta 页面源信息，编码等
link 外链接css文件
body
子标签：
字体标签：h1-h6 ，u下划线 ，b加粗，em斜体
排版标签：br换行，div盒子，span小区域，ul点式排序 ，ol数字排序 ，li排序内容，tr表格，td表格
其他标签：img连接图片
交互标签：<a href="地址or文件地址" title="鼠标悬浮提示" target=“_blank在窗口打开”>:显示文字</a> #超链接标签
表单标签：<form action="地址或文件" method="get/post">
表单控件：input ，select，textarea，button （输入，选择，文本，按钮）
空间的属性：name就是key value就是key对应的值
input的类型：text-输入框提交文字, password-提交密码 ,submit-提交按钮 ,radio-单选(name相同互斥), checkbox-多选
关联控件：label辅助扩展选中标签范围
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>alibaba</title> <style> #d1 { background-color: antiquewhite; height: 420px; width: 420px; margin: 0 auto; padding: 0; border: chocolate; } </style> <body> <h3>quguanwen</h3> <p> <em>quguanwen</em> <b>quguanwen</b> <u>quguanwen</u> <u><b><em>quguanwen</em></b></u> </p> <div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <ol> <li>3</li> <li>2</li> <li>1</li> </ol> <table border="1" style="border-collapse: collapse"> <tr> <td>name</td> <td>age</td> </tr> <tr> <td>quguanwen</td> <td>18</td> </tr> </table> </div> <div id="d1"> <form action="http://www.baidu.com/s" method="get"> <label for="i1">快点输入</label> <input type="text" name="wd" id="i1" value=""> <select name="sd" id="s1"> <option value="1">第一个</option> <option value="2">第二个</option> <option value="3">第三个</option> </select> <textarea name="wenben" id="w1" cols="30" rows="10"></textarea> <input type="submit" value="点击"> <label for="b1">快点提交</label> <button type="submit" id="b1">提交</button> <br> 男<input type="radio" value="1" name="wd1"> 女<input type="radio" value="0" name="wd1"> 保密<input type="radio" value="2" name="wd1"> <input type="password" name="password"> <br> 衣<input type="checkbox" value="1" name="wd2"> 食<input type="checkbox" value="1" name="wd3"> 住<input type="checkbox" value="1" name="wd4"> 行<input type="checkbox" value="1" name="wd5"> </form> </div> <div> <img src="./img1" alt="显示错误"> </div> </body> </html>
