html与css基础

8.13总结
1.有序列表：ol，子级只能是li ，li标签的display：list-item
适用场景：相关的一类内容展示或者分类
2.有序列表：ul
适用场景：导航：header>nav>ul
本身的list-style显示在padding区域，称次盒子，但可让其进主盒子，消除list-style可none也可消除padding
 list-style 在一个声明中设置所有的列表属性。
list-style-type 设置列表项标记的类型。
ol
lower-roman小写罗马数字 upper-roman大写罗马数字 up-alpha大写英文 decimal-leading-zero数字前面加0
list-style-position 设置在何处放置列表项标记。
list-style-image 使用图像来替换列表项的标记。
 list-style-position 设置列表项标记的放置位置。
inside 进主盒子 outside 默认值
ul
circle 空心圆 disc实心圆 square 实心正方形
3.表格正确书写格式

colspan是在一行中的多列合并，rowspan是多行合并，在td的起始标签中书写
3.表单适用场景：注册，登录，搜索
父元素form，子元素input
action属性为提交地址
method属性为提交方式（get/post）
input中type的值：
radio（单选框，并且要求name一致去实现单选功能）
checkbox（多选框）
submit（提交按钮）
reset（重置/恢复默认）
number（只能输入数字，但不建议用，因为会出现上下调的箭头，可用作数字选择的场景）button（普通按钮）
color（选择颜色）
file（选择文件）
name属性必须写，value属性，如果是用户输入，则不用写，用户选择就必须写，value值可写中文
下拉列表中，将name与id值相同，解决兼容性问题（数据库）使用lable可分类


成都
绵阳
达州


成都2
绵阳2
达州2


多行文本框：textarea

自带提交功能
maxlength 最大长度（手机号等）写在input起始标签
lable中的for属性值与input的id属性值相同，使文本内容与input相关联
用户名

添加value属性可设置按钮文本内容
激活焦点框时添加样式
input:focus {
box-shadow: 5px 3px 5px gray;
}
用户选择的文本框对input添加checked布尔属性，使其成为默认值，即用户不输入也有值
男
设置键值对（数据库中）
用户输入：添加name
用户选择添加name value
设置默认值
用户输入：value
用户选择（多选框/复选框 单选框）checked
下拉列表：selected
Input中placeholder属性：提示信息
为了使输入内容时与左边有边距，对input加padding-left
对提示信息修改样式
：：webkit-input-placeholder { }
8.14总结
设置响应式，书写格式：
@media screen and （设置的高度）{css代码块}即：检测视口的宽度
min-width：801px；表示大于801应用样式
max-width：800px；表示小于800应用样式
@media screen and (min-width:800px) {
div {
display: flex;
}
}
@media screen and (max-width:500px) {
div {
display: flex;
flex-direction: column;
}
}
@media screen and (min-width:500px) and (max-width:800px) {
div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
后为方便维护，直接将各个区域css代码区域，代码放在不同css中，在html中引用，再在前面添加条件



在各个css中
div {
display: flex;
}
div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

div {
display: flex;
flex-direction: column;
}

8.13总结
1.有序列表：ol，子级只能是li ，li标签的display：list-item
适用场景：相关的一类内容展示或者分类
2.有序列表：ul
适用场景：导航：header>nav>ul
本身的list-style显示在padding区域，称次盒子，但可让其进主盒子，消除list-style可none也可消除padding
	list-style 在一个声明中设置所有的列表属性。
list-style-type 设置列表项标记的类型。
ol
lower-roman小写罗马数字  upper-roman大写罗马数字  up-alpha大写英文  decimal-leading-zero数字前面加0
list-style-position 设置在何处放置列表项标记。
list-style-image 使用图像来替换列表项的标记。
	list-style-position 设置列表项标记的放置位置。
inside  进主盒子  outside 默认值
ul
circle 空心圆  disc实心圆  square 实心正方形
3.表格正确书写格式
 
colspan是在一行中的多列合并，rowspan是多行合并，在td的起始标签中书写
3.表单适用场景：注册，登录，搜索
父元素form，子元素input
action属性为提交地址
method属性为提交方式（get/post）
input中type的值：
radio（单选框，并且要求name一致去实现单选功能）
checkbox（多选框）
submit（提交按钮）
reset（重置/恢复默认）
number（只能输入数字，但不建议用，因为会出现上下调的箭头，可用作数字选择的场景）button（普通按钮）
color（选择颜色）
file（选择文件）
name属性必须写，value属性，如果是用户输入，则不用写，用户选择就必须写，value值可写中文
下拉列表中，将name与id值相同，解决兼容性问题（数据库）使用lable可分类
            <select name="city" id="city">
                <optgroup label="市场部">
                    <option value="cd">成都</option>
                    <option value="my">绵阳</option>
                    <option value="dz">达州</option>
                </optgroup>
                <optgroup label="市场部2">
                    <option value="cd">成都2</option>
                    <option value="my">绵阳2</option>
                    <option value="dz">达州2</option>
                </optgroup>
            </select>
多行文本框：textarea
        <textarea name="" id="" cols="30" rows="10"></textarea>
<button></button>自带提交功能
maxlength 最大长度（手机号等）写在input起始标签
lable中的for属性值与input的id属性值相同，使文本内容与input相关联
<label for="account">用户名</label>
            <input type="text" name="usename" id="account">
添加value属性可设置按钮文本内容
激活焦点框时添加样式
input:focus {
    box-shadow: 5px 3px 5px gray;
}
用户选择的文本框对input添加checked布尔属性，使其成为默认值，即用户不输入也有值
            <input type="radio" name="gender" checked>男
设置键值对（数据库中）
用户输入：添加name
用户选择添加name value
设置默认值
用户输入：value
用户选择（多选框/复选框 单选框）checked
下拉列表：selected
Input中placeholder属性：提示信息
为了使输入内容时与左边有边距，对input加padding-left
对提示信息修改样式
：：webkit-input-placeholder { }
8.14总结
设置响应式，书写格式：
 @media screen and （设置的高度）{css代码块}即：检测视口的宽度
min-width：801px；表示大于801应用样式
max-width：800px；表示小于800应用样式
 @media screen and (min-width:800px) {
    div {
        display: flex;
    }
}
@media screen and (max-width:500px) {
    div {
        display: flex;
        flex-direction: column;
    }
}
@media screen and (min-width:500px) and (max-width:800px) {
    div {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
后为方便维护，直接将各个区域css代码区域，代码放在不同css中，在html中引用，再在前面添加条件
    <link rel="stylesheet" media="screen and (max-width:600px)" href="./css/xy_500.css">
    <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:1000px)" href="./css/xy501_800.css">
    <link rel="stylesheet" media="screen and (min-width:1000px)" href="./css/yx800_.css">
在各个css中
div {
        display: flex;
    }
div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

div {
    display: flex;
    flex-direction: column;
}