html元素分类

HTML——超文本标记语言

浏览器内核，浏览器种类

浏览器内核分为渲染引擎和JS引擎

常见浏览器分为IE,FireFox(火狐),Safari(苹果)和chorm(谷歌)四种；

元素分类：

块级元素：

1. DIV独占一行，划区域，设置宽高有效，DIV不存在width属性，必须采用style属性
2. 文本标签，严格要求元素宽高
3. 标题元素 h1~h6，给某些文字设置加粗及大小
4. 列表元素（有序，无序，自定义）

有序列表

<ol type="1" start="10">
			<!-- ol为有序列表，类型有A，a,i,I,1五种，默认住数字 -->
			<li>张三丰</li>
			<li>太极拳</li>
			<li>杆法</li>
		</ol>	

无序列表

<ul type="circle">
			<!-- ul为无序列表，默认为小黑点，有小黑点，空心圆和黑正方形三种 -->
			<li>张三丰</li> 
			<li>太极拳</li>
			<li>杆法</li>
		</ul>

自定义列表

<dl>
    <dd>
    <dt>
    </dt>
    </dd>
</dl>

行内元素： 与其他元素（行内元素）排列在同一行，设置宽高无效

1. a标签，超链接

   <a href="https:www.baidu.com" target="_blank">百度</a>
   		<!-- target= _blank打开新页面 -->
   		<!-- -self 本地页面打开 -->

2. span 没有特殊含义，可以修改文本内部某些文字

3. b加粗

4. i斜体

5. del删除

6. u下滑线

内联快元素，与其他行内元素在同一行，可设置宽高

1. img图片 src:图片地址 alt:提示信息（src错误显示）

   绝对路径/相对路径

   只是给图片增加宽度，高度也会等比增加

2. input输入标签

   单独使用input成立

   type为输入标签类型

   text文本

   password密码

   radio单选，name属性决定单选是否成功并且值一样

   checked默认选择一个值 如果属性名与值相同可省略

   checkbox多选

   button 普通按钮

   reset 重置 配合表单使用

   submit 提交 配合表单使用

3. 表单（form） 与input配合使用

   action：指定的地址 url地址

   method：传递的方法 8种 get post(数据交互)

   id:唯一性

   &nbsp空格

   name：表单提交数据根据name属性提交

   select+option 有几个option就有几个选项

   text area多行文本框

    <form action="内联块级元素.html" method="get">
    	用户名：<input type="text" name="username"><br/>
    	密&nbsp;&nbsp;码:<input type="password" name="userpassword"><br/>
    	<input type="submit">
    	<input type="reset">
    	地址：<select name="select" id="">
    		<option value ="sc">四川</option>
    		<option value="sh">上海</option>
    		<option value="yn">云南</option>
    	</select>
    	<input type="hidden" name="id" value="11">
    	<input type="submit" >
    	<input type="reset">
    	<textarea rows="3" cols="10">
    	</textarea>
    </form>
   

   ​

4. 表格 table

   tr表示行

   th表示表格头部,td表示表格的数据

   border表示表格的边框

    <table border="1" style="width: 50%;">
    <tr>
    	<td colspan="8" align="center">商品信息表</td>
    </tr>
    	<tr>
    		<th rowspan="4">统计</th>
    		<th>id</th>
    		<th>商品名</th>
    		<th>商品类型</th>
    		<th>商品价格</th>
    		<th>库存</th>
    		<th>说明</th>
    		<th>操作</th>
    	</tr>
        <tr>
   

   ​

    		<td>1</td>
    		<td>iPhone12</td>
    		<td>手机</td>
    		<td>1000</td>
    		<td>50</td>
    		<td>这是一个iPhone</td>
    		<td>
    			<input type="radio", name="update">删除
    			<input type="radio", name="update">修改
    			<input type="button" value="提交">
    		</td>
    	</tr>
    	
    	<tr>
    		
    		<td>2</td>
    		<td>鲜花饼</td>
    		<td>糕点</td>
    		<td>40</td>
    		<td>590</td>
    		<td>香甜可口</td>
    		<td>
    			<input type="radio", name="update">删除
    			<input type="radio", name="update">修改
    			<input type="button" value="提交">
    		</td>
    	</tr>
    	
    	<tr>
    		<td>3</td>
    		<td>air pords</td>
    		<td>耳机</td>
    		<td>1000</td>
    		<td>50</td>
    		<td>音质好，轻便</td>
    		<td>
    			<input type="radio", name="update">删除
    			<input type="radio", name="update">修改
    			<input type="button" value="提交">
    		</td>
    	</tr>
    	
    </table>