html一种知识点总结

什么是网站

网站是由很多个网页组成。

网站建设流程：
1、域名（网址）
2、租用空间（服务器）?
3、网站建设（1. 确定网站主题，2.收集资料，3、规划网站，4、制作页面）
4、网站推广
5、网站维护

二、什么是网页？

Web标准(网页的组成)：结构（html）+ 表现（css） + 行为（js）
1、HTML：实现网页结构（网页内容）
2、CSS：实现网页的修饰、表现
3、JS：实现的是交互效果，可以让页面动起来

三、HTML发展史

html 超文本标记语言（Hyper Text Markup Language）www万维网的描述性语言，超文本指的是网页中包含文字、图片、输入框、音频和视频等组成，所以不是单纯的文本，而是超文本；超文本就是超链接，标记就是标签

H5的基本结构
一、两个区域1.head描述区 2.bady内容区
二、html标签1.单标签《空标签》 2.双标签《成对的》

html语法说明
1.在尖角好后面的第一个单词就是标签的名称
2.在标签后面，用空格隔开的是属性
3.属性和属性值之间用等号连接
4.属性值放在引号里面（单双引号都可以）
5.如果一个标签有多个属性时，属性和属性之间用空格隔开

常用标签
1；标题标签

-

区别：拥有自己默认的大小，文本也是加粗状态 唯一性：h1一个页面只能出现一次 放logo
h2-h6可以是网页板块的标题，没有唯一性
2：文字加粗标记 区别strong偏向强调语气的作用
3：文本倾斜标记
4：下划线标记
5：强制换行符
特点：浏览器只要遇到br 后面的内容聚会放到下一行
6：水平线标记

---

7：上丶下标记 (上) （下）
8：段落标记

9：代表单个文字后一小段文本 利用css可以达到字体变色
10：转义字符 &nbsp；（空格） &gt； &lt； （左右尖角号） &copy；版本符号（备案图标）
11：div

作用：专门给网页划分布局的

html的列表
有序列表

无序列表

自定义列表

（ 一般情况下放置图片 ）（

放到是对图片的解释

）

拓展： 改变列表符号的样式：type=“属性值” 属性值：a/A i/I
改变列表符号开始的符号： start+“属性值” 属性值指一个数字，数字呆表几就从第几个开始

超链接
a里面的属性href=“跳转的地址” 开头为http：//网址
target=“属性值” 属性值为_self(默认值：在当前页面打开) _blank(在新窗口打开)
title=“”提示信息 也可以作为图片的一个小标题（大部分标签都支持title属性）

标签的应用
img标签里的属性 src=“图片的路径”
alt=“文本替换图片”（属性值为空也不能删除） 说明：当图片加载不出来是，alt里面的文本替换图片
width=“”图片的宽 height=“”图片的高 border=“” 图片的边框
找图片位置（相对路径）
目标和你在同一个文件 同级找同级 ./ 当前路径
父级找子级 ./文件夹名称/图片名称
子级找父级 …/返回上一级/图片名称

表格 行 列
width=“”宽 hight=“”高 border=“”边框 bordercolor=“”边框颜色
cellspacing=“” 相邻单元格边框间的间距
cellpadding=“” 内容距离边框之间的间距
align=“属性值” 水平对齐方式 属性值:left center right
valign=“属性值” 垂直对齐方式 属性值：top bottom middle
合并单元格：跨行的都是合并行 不跨列行的都是合并列
合并行的属性：rowspan 合并列：colspan 注：无论合并行还是列都是在td操作 先合并行在列

表单标签（标签域）
属性 action=“url（路径）” 表单提交的路径
method=“get/post” 数据的传输方式
maxlength="" 输入字符的最大长度
name=“表单的名称”

表单控件： 标签input
属性：type=“” 指定input生成的类型（输入框，提交按钮，空按钮等等）
value=“” 根据type类型不同，作用也不一样
name=“” 当前表单元素的名称
size=“” 以字符为单位的，控制表单元素的大小
（文本框（输入框）
（提交按钮）
(密码框)
重置按钮（是当前表单恢复到初始状态）
空按钮

css语法： 选择符{属性：属性值；} 注：所有css代码 都要放到css样式表里
css语法说明 1：选择符悬着的说html标签
2：所有css声明都要放在大括号里面
3：css声明 包括 属性 和属性值
4：css的属性和属性值 使用冒号进行连接
5：每条声明的后面用分号结尾
6：如果一个属性有多个属性值的时候，属性值和属性值之间用空格隔开

css样式表 1：内部样式表 <style type=“test/css” 注：内部样式表，尽量放在head描述区里
2：外部样式表有两种方法
（1）首先创建一个后缀名为.css的文件
hrel=“” 连接路径 rel=“stylesheet” 建立关联性
（2）
两个的区别1：本质区别 link属于html一个标签 @import属于css提供的一个方法
2：加载顺序 link导入的css 和html 的结构 同时加载。 @import 先加载结构 后加载样式
3：兼容性差别 link的兼容性更好一些
4：js操作DOM样式的擦别 #import导入的css是无法通过js做动态的修改
3：内联样式表（行间样式，行内样式） <标签 style=“内联样式”></标签>

样式表的权重关系：
1.内联样式表的权重最大！
2.内部和外部样式的权重，和书写的前后顺序有关！
（放在后面的会把放在前面的样式覆盖掉,覆盖的只是相同属性的样式，不同属性的样式会继续执行。）
!important -> 当前声明具有最高权重！ 语法： background:red!important;

css语法：
选择符{属性：属性值;}
选择符：选择符就是给标签起名字。

一：类型选择符（标签选择符）
    所有的html标签可以直接当作选择符进行应用。
    比如：div\p\em\i\b\strong.............
    特点：能选中当前结构里面全部同名标签。
    应用：想统一某一个标签样式的时候或者是清除某个标签默认样式的时候

。
二：id选择符
语法：
起名字： <标签 id=“名称”></标签>
用名字写样式： #名称{ 属性:属性值 }
特点：唯一性！在同一个页面里面，一个id名只能用一次。
应用：来划分网页外围结构

三: 类选择符(class选择符)
    语法:
    其名称:         <标签 class="名称1 名称2 名称3 名称4..."></标签>
    用类名写样式     .名称{属性:属性值;}
    特点:
    1:一个元素可以有多个类名,类名可以重复出现
    2:可以制定一类样式.

（id、class）起名规范：
尽量小写字母开头。
数组、字母、下划线、连字符的组合。
不能使用关键字命名 （所有的标签和属性都属于关键字）
命名尽量反应板块内容、或者反应结构(语义化)。
可以是拼音，但是不能出现汉字和特殊字符。

四: 群组选择符
    语法:以逗号分隔的方式,把多个选择器组成一组,给整组添加样式.
    选择符1,选择符2,选择符3,选择符4{ 属性:属性值; }
     比如:.名称1，.名称2，.名称3.....

五: 包含选择符(子代选择器\后代选择符)    ( 通过父元素找子元素 )
    语法:
        父元素 子元素{ 属性:属性值; }


六: 伪类选择器
    a:link {color: red;}                     未访问的链接状态 
    a:visited {color: green;}	         已访问的链接状态 
    a:hover {color: blue;}                   鼠标滑过链接状态 
    a:active {color: yellow;}                鼠标按下去时的状态 
    比如a：lingk{
		color:red
                }   就会显示未访问的连接状态颜色为红色     
    
七：通配符
    *{  }

    * 选择页面中所有的元素！

    *{
        margin:0;    盒子外围间距清零
        padding:0;   盒子内部的距离清零
    }

选择符的权重关系：
id > class > 标签
四个数字表示权重：
内联样式表 -> 1000
id -> 100
class -> 10
标签 -> 1
伪类选择符 -> 10
通配符 -> 0
包含选择符的权重为权重之和
eg :
id class{} 100 + 10 == 110
id id class 标签{} 100+100+10+1 == 211
当权重相同的时候，后写的样式会前写的样式 给 覆盖掉。
！important 权重是最高的 比如background：red ！important ；

文本属性：

1： font-size:;  控制文本大小
    1:为了消除系统之间显示差异，规定：16px 为标准字体大小。
    2:文本大小设置，设置为偶数。
    3:PC端项目，设置最小尽量别低于12px ;
    4:从ps中获取文本大小，汉字量取文本高度。
    5:文本单位：  px \ em \ pt(磅)【常用在印刷领域】
    12px == 9pt
    em ( 相对大小单位，相对于父元素的font-size值而定 ) (默认情况下，  1em == 16px)              
    6:
       xx-small =9px
        x-small =11px
        small =13px
        medium =16px
        large =19px
        x-large =23px
        xx-large =27px

2：color:; 控制网页中的文本颜色
    颜色值：
        a：十六进制表示颜色值：
            16进制数字：0 - 9  a - f
            颜色值： #ff0000
                6个数字：
                    前两位     红色
                    中间两位   绿色
                    最后两位   蓝色
        b: RGB(255,0,0) 模式
            拓展： rgba(255,0,0,0.5)0.5 指定文字透明度

3：font-family:;控制的是网页中字体类型。
    默认的字体类型："微软雅黑"
    系统能支持的字体：web安全字体：微软雅黑、宋体、楷体...
    英文默认的字体：Arial
    语法：font-family:字体1,字体2,字体3,......           
        注：
            1:中文字体必须放在引号里面
            2:如果一个字体多个单词组成 也要放在引号里面
            3:如果字体是一个单词 不需要引号。
            4:先写英文字体，后写中文字体。

4：font-weight:;控制文本是否加粗
    属性值：
        bold     加粗
        bolder   加粗
        normal   清除加粗，恢复常规文本
        100 - 900
        100 - 500:不加粗
        600 - 900:加粗的状态 

5: font-style:;控制文本的倾斜
    属性值：
        italic    倾斜
        oblique   倾斜（倾斜幅度更大，但是一般不会有明显变化）
        normal    恢复常规文本

6: line-height:; 控制文本的行高。
    a: 从ps设计图上：怎么获取行高:从第一行开始量到第二行开始。
    b: 
        单行文本：
            如果让单行文本在容器里面上下居中，line-height设置容器高度即可
            显示状态：
                小于容器高度的时候：文本往上移动
                大于容器高度的时候：文本往下移动

7：text-align:; 控制文本的水平对齐方式
    属性值：
        center   居中对齐
        left     左对齐
        right    右对齐
        justify  两端对齐

        
8:text-decoration:; 文本修饰（下划线、上划线、删除线）
    属性值：
        none     清除下划线
        underline 添加下划线
        overline  添加上划线
        line-through  添加删除线

9: text-indent:; 
    text-indent:2em；首行缩进：

    text-indent能设置负值：文字往左走。（悬挂式缩进）

10：字间距、词间距
    letter-spacing:;  字间距
    word-spacing:;    词间距

11: text-transform:; 控制文本大小写。
    属性值：
        uppercase   大写
        lowercase   小写
        capitalize  每个单词的首字母大写

浮动
属性：float
属性值：
left
right
none
特点：
1:添加浮动之后，元素是不占据空间。
2:如果让多个元素横向进行排列，所有的排列的元素，都必须添加浮动。
3:如果子元素添加浮动，宽度大于父元素的时候，后面的元素被挤到下一行。