HTML与CSS基础及应用详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangxy7894/article/details/120731224

Html

1.基础模板

 <html></html>  html文件的标志
 <head> 网页头部分
 <meta> 设置
 <title> 标题
 <body> 网页主体部分

2.常用标签

 基础标签
 <h1>~<h6> 标题标签
 <ul>无序列表<li>列表
 <ol>有序列表<li>前面带数字的列表
 <img src="" alt="">图片标签 alt后为加载失败展示内容
 <br />回车换行
 <a href="URL" target="_blank"> 链接地址 新窗口打开 self为原始窗口打开（默认）
 <a name="top"> 锚链接标记
 <a href="#top"> 锚链接跳转
 <input type="text"> 普通输入框
 <input type="password"> 密码框
 <input type="number"> 数字框
 <input type="date"> 日期
 <input type="week"> 周
 <input type="button" value="保存">按钮
 <input type="submit" value="提交">提交
 <input type="reset" value="重置">重置
 <input type="radio"> 单选
 <input type="checkbox">多选框
 
 表格标签
 <table>表格
 <th> 表头
 <tr> 行
 <td> 列
 （基本设置：border边框宽度  cellspacing表间距  cellpadding格子边框与内容的间距
  align位置  colspan列合并  rowspan行合并）
  
 表单标签
 <form>表单标签
 <select>下拉选框
 <option>下拉的选项内容
 <input type="file"> 文件
 <textarea> 文本区域框
 
 视频音频
 <audio controls="controls">添加音频
 <source src="">音频路径
 <video controls="controls">添加视频
 <source src="">视频路径

CSS

css:层叠样式表 stylesheet 用来装饰网页，页面外观美化布局和定位

1.基本用法

选择器{
	属性名：属性值；
}

css应用方式：内部样式、行内样式、外部样式
1.内部样式-在页面头部通过style标签定义-在当前页面起作用
2.行内样式-又称嵌入样式，直接在html标签中通过style定义修饰
3.外部样式-单独的.css文件，使用link标签或@import指令引入
<link rel="stylesheet"  href="URL">

2.选择器

基础选择器

1. 标签选择器-又称元素选择器，使用HTML标签作为选择器名称
2. 类选择器-自定义名称，使用.后缀名  调用时通过class属性调用类选择器
3. ID选择器-自定义名称，使用#后缀名  调用时通过html标签的id属性值来匹配

复杂选择器

1.复合选择器-标签选择器+类选择器、标签选择器+id选择器
2.组合选择器-集合声明-多个具有相同样式的选择器放在一起声明，使用逗号隔开
3.嵌套选择器-选择器内部嵌套设置选择器，注意空格隔开
4.伪类选择器-多用于标签，四种状态
	link-未访问的链接
	visited-已访问的链接
	hover-鼠标悬停在链接上
	active-选定的链接，被激活
	注：默认超链接颜色为蓝色、下划线
5.伪元素选择器-
	first-letter 第一个字符的样式
	first-line 第一行的样式
	before 元素内容的最前面添加内容，配合content使用
	after 元素内容后面添加内容，配合content使用

选择器优先级

行内样式>ID选择器>类选择器>标签选择器
！important 可以使某个样式有最高优先级

3.css属性

字体

font-size 大小、尺寸，px像素，em倍数，默认字体大小为16px
font-weight 粗细，normal普通，bold粗体
font-family 字体，一般建议写3种，首选、其次、备用，逗号隔开
font-style 样式，normal普通，italic斜体
font 简写，简写属性：font:font-style|font-weight|font-size|font-family
		书写顺序必须符合要求

文本

color 颜色
line-height 行高
text-align 水平对齐方式  left、center、right
vertical-align 垂直对其方式 top、middle、bottom
text-indent 首行缩进
text-decoraction 文本修饰 underline、overline、line-through
text-transform 字母大小写转换 lowercase、uppercase、capitalize
letter-spacing 字符间距
word-spacing 单词间距
white-space 空白的处理方式 文本超出后是否换行，取值：nowrap

背景属性

background-color	背景颜色	transparent 透明
background-image	背景图片	url()方式指定图片的路径
background-repeat	背景图片的重复方式	repeat(默认)，repeat-x，repeat-y,no-repeat
background-position	背景图片的显示位置	默认背景图显示在左上角  top、bottom、left、right、center
background-attachment	背景图片是否跟随滚动	scroll(默认)、fixed固定不动
background	简写  简写属性：background:background-color|background-image|background-repeat|background-position
		书写顺序没有要求

列表属性

list-style-type	设置列表前的标记	none、disc、circle、square、decimal
list-style-image	将图像作为列表前的标记	
list-style-position	设置标记的位置	取值：outside(默认)、inside
list-style	简写  list-style:list-style-type|list-style-image|list-style-position
			书写顺序没有要求

表格属性

border-collapse:表格中相邻的边框是否合并（折叠）为单一边框
separated（默认） collapse

4.盒子模型

margin 外边距
border 边框
padding 内边距
width 宽度
height 高度

样式style的取值：
solid实线、dashed虚线、dotted点线、double双线、
inset内嵌的3D线、outset外嵌的3D线

元素所占空间计算
宽度=width+左右padding+左右border+左右margin
高度=height+上下padding+上下border+上下margin