本文介绍了HTML的基础知识，包括标签如h1-h6、p、br、img、a、video和audio等，以及display属性、列表（ol、ul、dl）、表格的使用和表单元素。同时，详细讲解了CSS的选择器机制，如ID、类、标签选择器，以及伪类选择器和属性选择器。此外，还涵盖了CSS中的背景、文本、边框、浮动和定位等样式设置。
html基础
基础知识(HTML超文本标记语言)
一些标签的使用，切记所有标签都需要闭合，不管是单体标签还是成对标签
优先级: 行内样式表(行间样式)>内部样式表（内链样式）>外部样式表(外链样式)
link标签:引入外部文件; rel:引入的是什么类型的外部文件; href:位置;
构成页面的四个基础标签
1.DOCTYPE html，声明
2.html标签，lang=“en” 表示所有的标签元素内容的语言都是英语，对搜索引擎和浏览器是有帮助的
3.head标签，头标签用来设置页面
4.body标签,内容主题所有内容都在这
基础标签
h1~h6标签是标题，
p段落标签是正文，
br是换行，
img是图片，
a是超链范接，
video视频标签
audio音频标签
span文本标签
div块标签
dispaly(决定标签的块级或行级特点)
块级标签:inline
设置宽高,会自动换行
行级标签:block
不会自动换行不能设置宽高，他的宽高是自身大小
行内块标签:inline-block
支持宽高，共处一行，受空格和换行的影响
滚动marquee
direction:滚动方向
behavior：滚动方式（scroll、slide、alternate）scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动
scrollamount：速度，默认为6
scrolldelay：设置滚动延迟时间
onmiuseover=”stop()“鼠标悬浮停止移动
οnmοuseοut="start()"鼠标离开开始移动
loop：设置滚动字是否循环滚动默认为-1表示一直滚动
bgcolor：设置滚动字的背景色
height：设置滚动字的高度
width：设置滚动字的宽度
列表：(li列表内容)
ol有序列表：
type:序号类型 start:起始 reversed：倒数
<ol type="A" >
<li>李文玉</li>
<li>老崔</li>
<li>南迎泽</li>
<li>小坤坤</li>
</ol>
ul无序列表：
ul type属性:
disc 默认值。实心圆。
circle 空心圆。
square 实心方块。
<ul type="square">
<li>李文玉</li>
<li>老崔</li>
<li>南迎泽</li>
<li>小坤坤</li>
</ul>
dl自定义列表：
<dl>
<dt>水果</dt>
<dd>榴莲</dd>
<dd>芒果</dd>
<dd>榴莲</dd>
</dl>
表格：
基本配置：
| table | 表格标签 |
|---|---|
| caption | 表头（表名） |
| tr | 行 |
| th | 表头 |
| td | 单元格 |
属性：
| border | 边框宽度 border=“1”,边框宽度为1px |
|---|---|
| bordercolor | 边框颜色bordercolor=“red.边框颜色为红色” |
| cellpadding | 单元格填充距离，cellpadding=“10px”,单元格边框和单元格之间的距离为10px |
| cellspacing | 单元格与单元格之间的距离，cellspacing=“0”,单元格之间距离为0 |
| align | 对齐方式，left、center、right。align="left"表格向左对齐 |
| width | 宽度,width=“500”,表格整体宽度为500px |
<table border="1" align="center"cellpadding="10px"cellspacing="5"
width="600" bordercolor="blue">
<caption>学生成绩表</caption>
<tr>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
</tr>
<tr>
<td>李宁</td>
<td>92</td>
<td>77</td>
<td>98</td>
</tr>
<tr>
<td>唐晓</td>
<td>92</td>
<td>77</td>
<td>98</td>
</tr>
<tr>
<td>张毅</td>
<td>92</td>
<td>77</td>
<td>98</td>
</tr>
</table>
合并列，合并行
<table border="1" align="center">
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
</tr>
<tr>
<td rowspan="2">row 1,cell 1</td>
<td>row 1,cell 2</td>
<td>row 1,cell 3</td>
</tr>
<tr>
<td>row 2,cell 2</td>
<td>row 2,cell 3</td>
</tr>
<tr>
<td colspan="3">row 2,cell 1</td>
</tr>
</table>
表单
<form name="表名称" action="url地址" method="提交方式" >
各种表单元素控件
</form>
基本配置：
| name | 表名称 |
|---|---|
| action | 指定表单数据提交到哪个地址进行处理 |
| method | get方法、post方法 |
属性：
| input type = “text” | 文本表单 |
|---|---|
| input type=“password” | 密码保密字段 |
| input type=“radio” | 单选按钮 |
| input type=“checkbox” | 多选框 |
| input type=“submit” | 提交按钮 |
| input type=“button” | 可点击按钮(多数情况下通过javaScript启动脚本) |
| input type=“reset” | 定义重置按钮，清楚表中所有数据 |
| input type=“image” | 定义图像形式的提交按钮 |
| input type=“hidden” | 定义隐藏的输入字段 |
| input type = number | 定义数字 |
| input type = date | 定义日期 |
| input type =“file” | 定义输入字段和浏览按钮，供文件上传 |
其他属性：
| textarea标签 | 定义文本区域 |
|---|---|
| select标签 | 下拉框 |
案例：
<form>
<!--value默认值 name捕获元素或提交定位-->
<span>用 户 名:<input type="text" value="搜索一下" name="userName"><br></span>
<span>密 码:<input type="password" value=""
name="userpassword"><br></span>
<!--通过一致的name属性控制提交变量的值，几个选项只能选择一个-->
<p>从事专业:</p>
<span><input type="radio" name="speciality" value="security">信息安全</span>
<span><input type="radio" name="speciality" value="software">软件工程</span>
<span><input type="radio" name="speciality" value="comApp">计算机应用</span>
<!--通过一致的name属性控制元素提交变量的值，几个选项中可以选择一个或者多个-->
<p>爱好:</p>
<span><input type="checkbox" name="hobby" value="wallk">散步</span>
<span><input type="checkbox" name="hobby" value="music">音乐</span>
<span><input type="checkbox" name="hobby" value="swim">游泳</span>
<span><input type="checkbox" name="hobby" value="video">视频<br></span>
<!--提交按钮-->
<input type="submit" value="确认提交">
<!--普通按钮 click：触发程序名称-->
<input type="button" name="button1" value="普通按钮" click="">
<!--重置按钮 -->
<input type="reset" value="重置信息"><br>
<!--定义需要提交，但不需要显示或不方便显示的信息-->
<span>隐藏域<input type="hidden" value="1" name="hidden"><br></span>
<!--begin:开始的数量。end：结束的数量。value：默认的值。name：属性名称-->
<input type="number" begin="2" end="10" value="5" name="comNumber"><br>
<!--Date:日期-->
<span>出生日期<input type="date" name="birthday"/></span>
<!--文本区域textarea cols:每行字符数 rows:显示的·行数 resize:禁止拉伸 -->
<textarea name="wotextarea" id="" cols="100" rows="10" style="resize:none"></textarea>
<select name="woselect" id="">
<option value="english">英语</option>
<option value="math">数学</option>
<option value="Chinese" selected="selected">语文</option>
</select>
</form>
选择器( 优先级：ID > 类 > 标签)
一.选择器:
全局选择器:*(选择所有的html标签进行样式添加)
类选择器:.(选择class名相同的标签进行样式添加)
id选择器:#(选择id名相同的标签进行样式添加，id是唯一的)
标签选择器:(直接对标签进行样式添加)
同时选择器: div,p(把div和p的所有标签进行样式添加)
二.层次选择器————嵌套(举例):
直接子类选择器:div>p(选择所有父类的div的p标签进行样式添加);
子类选择器:div p (选择div里面所有的p标签元素进行样式添加);
brother~n(选中brother元素后面的所有某一类兄弟元素n)
brother+n(选中brother元素后面的某一个相邻的兄弟元素n)
三.属性选择器:
li[index] 选择li标签下有index属性的标签;
li[index*=abc]选择index属性的值包含abc;
li[index^=a]选择li标签下有index属性的标签并且值首字母为a;
li[index$=a]选择li标签下有index属性的标签并且值尾字母为a;
li[index=a]选择li标签下有index属性的标签并且值为a;
四.伪类选择器:
E:nth-child(2)选择每个p元素是其父级的第二个子元素
E:nth-last-child(1)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
E:first-of-type 选择每个p元素是其父级的第一个p元素
E:last-of-type 选择每个p元素是其父级的最后一个p元素
a:link 定义正常链接的样式
a:visited 定义已访问过链接的样式
a:hover 定义鼠标悬浮在链接上时的样式
a:active 定义鼠标点击链接时的样式
css
背景
背景颜色 background-color
背景图片 background-image
背景图片重复设置 background-repeat
背景固定 background-attachment
背景图片定位 background-position
背景大小 background-size
背景盒模型定位默认 background-origin
背景裁剪 background-clip
简写属性(颜色，图片，重复，固定，定位)
文本（text）
其他文本属性
文字属性
文字大小 font-size
文字字体样式 font-family
引入外部字体样式 @font-face
文字倾斜 font-style:italic;
文字加粗font-weight:bold
小型大写字母 font-variant:small-caps;
文本属性
删除链接下划线 text-decoration:none
文本对齐 text-align
文本颜色 color
文本行高 line-height
子主题 1
文本换行 word-wrap:break-word
文本不换行whiter-space:nowrap;
文本转换 text-transform
文本缩进(只应用于p标签) text-indent：50px； 指定所选字句，第一行缩进
文本阴影 text-shadow：水平方向位移 竖直方向上位移 模糊度 颜色
边框（border）
边框 border:线宽 线样式 颜色
浮动（float）
float(浮动)，使元素(默认左浮动)从设置方向(left,right,inherit)浮动
clear(清除浮动)，left、right、both(两边)、none、inherit
定位（position）
默认 static
相对定位 relative
相当于把默认文档流当做标准进行位移
固定定位 fixed
把元素固定到一个固定位置，窗口滚动不受影响
绝对定位 absolute
剪辑一个绝对定位的元素 clip：rect(top,right,bottom,left)
粘贴定位 sticky ：
基于用户的滚动位置来定位，
用户滚动位置未超出目标区域行为和相对定位相同，
超出目标位置后和固定位置相同
线性渐变:
linear-gradinet(开始位置 角度，起始颜色，终止颜色)
径向渐变：
radial-gradinet()(形状 发散方向，起始颜色，终止颜色）
transfrom变形：
移动、缩放、转动、拉长、拉伸
translate()/rotate()/scale()/skew()/matrix()
扫一扫
2229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
