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>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<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()