第二章 HTML 列表、form表单、div盒子

第二章

列表：

有序列表、无序列表、自定义列表

有序列表：
<!-- type中可以设置有序列表的前缀A/a/I/i/1 
其中start属性只有“number”控制从哪个开始，只能跟数字
--> 
<ol type="A">
        <li>花花</li>
        <li>哈哈</li>
        <li>明明</li>
    </ol>

无序列表：
 <!-- 新闻列表、导航栏 -->
 <!-- none无前缀 -->
<ul type="none">
        <li>唱跳</li>
        <li>rap</li>
        <li>篮球</li>
    </ul>
 <!-- square方块前缀 -->
    <ul type="square">
        <li>唱跳</li>
        <li>rap</li>
        <li>篮球</li>
    </ul>
 <!-- circle空圆前缀 -->
    <ul type="circle">
        <li>唱跳</li>
        <li>rap</li>
        <li>篮球</li>
    </ul>
<!-- disc实心圆前缀 -->
    <ul type="disc">
        <li>唱跳</li>
        <li>rap</li>
        <li>篮球</li>
    </ul>

<!-- 自定义列表 -->
    <dl>
        <dt>被解释的内容</dt>
        <dd>对上面内容起到解释的作用</dd>
    </dl>

form表单：

form表单在网页中应用
 表单域：说明表单作用的区域
<form>
    提示信息以及表单元素
</form>
提示信息：告诉我们应该去干啥的
表单元素：收集用户信息的
 <form action="http://www.baidu.com">
        请输入你的姓名：<input type="text"><br>
        请输入你的密码：<input type="password"><br>
        <input type="submit"value="登录">
        <!-- 重置属性 -->
        <input type="reset"value="清空"><br>
        <!-- 单选框 -->
       请选择你的性别： <input type="radio"name="sex">男
        <input type="radio"name="sex">女
        <input type="radio"name="sex">其他
        <br>
        <!-- 复选框 -->
        请选择你的爱好：<input type="checkbox" name="" id="">唱跳
        <input type="checkbox" >rap
        <input type="checkbox">画画
        <!-- 文本域 -->
        请输入你的评论：
        <textarea name="" id="" cols="30" rows="10"placeholder="请输入您的神评论"></textarea>
    </form>



 <!-- 单选框，checked默认选择 -->
        性别：<input type="radio"name="sex"checked>男
 <!-- disabled禁止修改表单 -->
    <input type="text"value="1111111111111111111"disabled>
 <!-- get和post的区别：
        method：提交方式
    一个会把信息挂在url上，post不会，get不安全，post安全，提交方式不一样，接受的方法不一样
    action表单提交的后台地址
    -->
    <form action="#" method="post">  

div盒子：

div划分区域
span用来修饰一行中出现的不同的样式的【css操作span实现】

总结：

列表：有序列表、无序列表、自定义列表
有序列表:
<ol>
    <li></li>
</ol>
属性：type start
无序列表:
<ul>
    <li></li>
</ul>
属性：type=“none/square/circle/disc”
自定义列表：
<dl>
    <dt></dt>
    <dd></dd>
</dl>
表单：
组成表单域+提示信息+表单元素/表单控件
表单域：
<form>
    属性：action---表单提交地址
    	 method---提交方式  
</form>
提示信息---一般指写的文字
表单控件/表单元素:
文本框：type=“text”
密码框：type=“password”
提交按钮：type=“submit”
重置按钮：type=“reset”
单选框 type=“radio” 这个必须要加相同的name属性值已达到互斥效果。
复选框：checkbox
文本域：textarea

属性：
value 初始值
name：不加没有办法把信息提交给后台、在单选框中通过相同的属性值达到互斥的效果
cols/rows 注意这个只能用在textarea里面
placeholder 没有内容时的提示信息
checked 默认选中【单选框/复选框】
disabled 禁用状态下的表单元素【只查看】
file 选择文件夹/上传文件夹
select option =>选择地址的/

css：
css在网页中美化界面样式
css的三种引用样式：
行内式：在标签中加入style属性，在属性值中放css属性：css属性值...
内部样式：在head里面放入style双标签，然后再style里面书写【选择器{css属性css属性值；...}】
外部样式：在head里面加入link标签<link rel="stylesheet"heaf="css文件地址">
优先级：行内>内部=外部
选择器：
标签选择器  标签{}
class选择器 首先现在标签中加入class属性 .class属性值{}
id选择器 首先在标签中加入id属性值，#id属性值{}
通配符选择器 清除标签自带的样式比如说内外边距
群组选择器  选择器1，选择器2，选择器3{}
后代选择器：选择器1+空格,选择器2{}----选择器2必须是选择器的后代
权重：
通配符选择器：0
标签选择器：1
类选择器：10
id选择器：100

第二章 思维导图