初学HTML+CSS小结

一、 media属性：

元素中可使用media属性使其适用于指定设备的样式，如

<link href="https://juejin.cn/post/mobile.css" media="screen and (max-device-width:500px)">
复制代码

在css中使用@media规则；

二、字体样式：

1.font-family:设置字体样式
2.font-size:设置字体大小
（1）通过px单位设置（常用）;
（2）通过百分数设置（相对父元素字体大小）;
（3）通过关键字，如xx-small,x-small,small,medium,large,x-large,xx-large;
3.color:设置文本颜色
4.font-weight：设置字体粗细
normal正常 / bold加粗
5.text-decoration：文本风格
下划线underline / 上划线overline / 删除线line-through
6.font-style:字体风格
斜体italic / 倾斜oblique
7.@font-face（内置的css规则）:定义字体名字与位置
为css文件增加@font-face规则，放在最上面

@font-face{
    font-family:"自定义命名";
    src:url("http://....."),
        url("http://.....");
}
复制代码

此外，常用的css内置规则还有：
@import / @media

三、常见css属性值简写方式

1.边距：

padding/margin : 上 右 下 左
padding/margin : 上下 左右
复制代码

2.边框/背景/字体

border: thin solid #bfa
background : white url() repeat-x
font: [ font-style  font-variant  font-weifht ] font-size / [line-height]   font-family
复制代码

四、布局

1.流
定义：块元素从上到下，每个元素前后有换行；
内联元素从左上至右下，水平紧挨。
2.布局
流体布局：随着页面的放大缩小，页面随之改变；
冻结布局：在HTML中使用<div id='allcontent'> 在css中限制其元素内容大小#allcontent{ ... }
凝胶布局：锁定内容宽度并居中

五、链接外部文件

1.链接外部css文件

<link type="text/css" rel="stylesheet" href="https://juejin.cn/loubge.css">
复制代码

2.链接外部js文件

<script src="https://juejin.cn/post/lounge.js"></script>
复制代码

六、HTML5新标签

1.标签

头部<header>
尾部<footer>
组织相关的内容<section>

旁栏<aside>
独立内容<article>

2.添加视频

<video  controls  autoplay  loop  width="200px"  height="200px" 
src="https://juejin.cn/post/video/ss.mp4"  poster="poster.png"  id="video"  preload="auto">
</video>
复制代码

autoplay和controls以及loop是布尔属性，没有值
（autoplay控制自动播放，loop控制重复播放，controls控制进度条）；
preload控制视频如何加载：none / metadata / auto；

七、表格

结构：

<table>
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </tboody>
</table>
复制代码

1.css属性caption-side可以指定标题在上方还是下方；
2.border-collapse:将单元格边框合为一个边框；
3.用text-align和vartical-align调整对齐
4.利用伪类对表格奇数/偶数行应用样式：
:nth-child(even) / :nth-child(odd)
5.指定一个单元格跨多少行：<rowspan>
指定一个单元格跨多少列：<colspan>
6.列表标记：list-style-type: disc / circle / square / none

八、表单

1.用<form>创建表单
2.组件

文本加掩码

<input type="password" name="secret">
复制代码

文本输入

<input type="text" name="fullname">
复制代码

属性maxlength指定字符长度

提交输入

<input type="submit">
复制代码

可用value属性显示别的名字

单选钮输入

<input type="radio" name="hot or not" value="hot">
复制代码

checked属性可使浏览器默认选中该选项

复选框输入

<input type="checkbox" name="..." value="..">
复制代码

文件输入

<input type="file" name="doc">
复制代码

文本区

<textarea rows="10" cols="10" name="...">
复制代码

菜单控件（下拉列表）

<select name="..." multiple（多选）>
    <option value="..." selected(默认选中)></option>
</select>
复制代码