html和css

发布于 2020-07-22  451 次阅读

html与css与js对网页的逻辑关系：

html：网页的结构部分（纯文字内容和seo部分）

css：网页的表现部分（样式部分）

javascrip：网页的行为部分（数据交互，动态效果）

注：在html与css的关系上在实现上是可以混合的，html中也有自带的css功能的属性，但具体编写时要分开

W3C手册：http://wql.luoqin.ltd/wp-content/uploads/2020/07/WEB手册.zip

一，html

html：主要负责网页的结构和内容部分

组成部：head部分，body部分

1，head部分

head部分主要是对于浏览器而言,被浏览器所解释的，如SEO部分

head部分的常用标签：

1.1,link标签：

rel属性：选择link标签的功能，

rel属性值：

stylesheet连接外部样式表

icon：设置网页的IOS图标(图片格式要为ico格式 )

preconnect：加快网页的一个加载速度的类型

href属性：对于rel数据文件路径的的设定

1.2,meta标签：

name属性：选择meta标签的功能

name属性值：  keywords搜索网页的关键字

description网页的描述性信息

autho网页的开发者信息

content属性：写具体信息数据

http-equiv

2，body部分

body是网页的内容部分

body的常用标签：

2.1,h标签

标题标签从h1到h2字体大小递减

2.2,p和br标签

都有换行效果，p是段落标签是一个主标签，br就单独是换行的自结束标签，可以在p内所有(行内换行)

2.3,a标签(超链接)

herf属性：跳转的界面位置

内部链接：连接内部的url地址或者内部的html文件 如：locadhost:8080

外部链接：连接外部的url，如：www.baidu.com

target属性：设置何处打开链接

_black：在新的窗口打开链接

_self(默认)：在当前窗口打开链接

2.4,table表格

格式：

<table>
    <tr> 
        <td></td>         
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

一个tr表示一行，在tr中的td表示一行中的一列

<col width="100">  一个col对应一个tr，通过col可以在外部设置一个tr的高和宽

<colgroup span="7" width="100"> col的加强版，对col分组，span属性对前面几个tr进行设置

colspan：水平覆盖几个单元格

rowspan：垂直覆盖几个单元格

2.5,from表单

表单用于数据的提交，post请求所提交的就是表单数据

action：表单提交后的链接操作，

input标签：

type属性：

text：文本输入框

password：密码输入框

radio：单选框

button：按键

checkbox：复选框

submit：提交form

2.6,列表

无序列表：<ol><li><li><ol>

type属性：

disc：实心圆

circil：空心圆

square：方块

 

有序列表：<ul><li><li><ul>

type属性:

a：以小写字母来排序

A：以大写字母来排序

1：阿拉伯数字排序

 

html标签的分类：

块级标签：独占一行，如：div，h1，p，ul，ol，form

特点：

       1，块级元素可以可以容纳其他非块级元素，

       2，块级元素如div有宽高，内边距，外边距，可以由于页面的布局

内联标签：在一行上显示，一行溢出才换行， 如：span，a，input，img

特点：

        1，内联元素宽高不可改变，没有盒子的概念(内边距，边框，外边距，内填充)

        2，内联元素只能容纳内联元素和文本

内联元素和块元素的转化：

            display属性：标签类型的转化

          属性值：block：转化成块元素

                           inline：转化成内联元素

                            none：元素不被显示

                          inline-block：行内块元素，css3新增                       

二，css

1，css样式表分类

内联样式：在标签内部添加样式

例：<div id="d" sytle="width:100px"></div>

内部样式：在head标签定义style通过选择器赋予样式

例：<head><style>#d{width:100px} </style></head>

外部样式：在外部文件定义css，在html中引入css

例：<link rel="stylesheet" href="外部文件css路径" >

2，css选择器

选择器与样式表关联，在内部和外部样式都需要选择器来定位元素

基础选择器：

标签选择器：通过标签名来定位元素，网页所以同类标签都会添加样式 ，例：标签名{}

id选择器：通过id值来定位(id是唯一的)，例：#id值{}

class选择器：通过class值来定位一类元素(class不是唯一的) ，例：.class值{}

通配符选择器：通过*号选择页面所有元素 ，例 ：*{}

 

高级选择器：

关系选择器：

后代选择器：父标签的所有指定子标签，例：.dd div{} 选择id为dd的标签内的所有div标签

子类选择器：选择父元素下的直接子元素标签 ，例：.ff > #fs{}

组合选择器：

并集选择器：几个元素一起被选定,逗号隔开 ， 例：#s,.f{}

属性选择器：

通过属性定位元素

[属性名]{}：定为有这个属性名的元素

[属性名="属性值"]{}：定位有这个属性名并且有指定属性值的元素

伪类选择器：

概念：与其他选择器不同，伪类选择器是选择元素的状态而不是选择元素

格式：指定元素:伪类{}

静态伪类：只对a标签起作用

:link：链接初始化的状态

:visited：链接访问后的状态

动态伪类：能赋予所有标签

:hover：鼠标正在页面标签悬浮后的状态

:active：鼠标点击后的状态

:focus：针对于表单的，获取表单焦点后的状态

 

css的权重问题：

css权重与运行时的优先级挂钩，权重越大，优先级越高

权重的大小规则：

内联样式：1000

id选择器：100

类选择器，伪类选择器，属性选择器：10

标签选择器，伪元素选择器：1

通配符选择器：0

复杂的选择器：可以把样式类型和基础选择器的权重相加，来判断优先级

 

三，盒子模型

作用：页面的布局(div+css)，盒模型不仅是对div有效，对所有的块标签也具备这个特点

在盒模型只前页面布局有的是table表格

盒模型的特点：盒模型要求元素要有宽高(width,height)，边框(border)，内边距(padding)，外边距(margin)

边框的三个属性：宽度(border-width)，样式(border-style)，颜色(border-color)

border-wither：1px,2px,3px,4px(分别是top-rigth-bottom-left，上右下左)

border-style的值：可以上下左右分别指定

none：不显示线条

dotted：点虚线

solid：实线

double：双实线

内边距和外边距分别是上右下左指定

四，浮动

浮点打破了常规的文档流，使块元素之间可以并行显示

在块元素上设置浮动，块元素将不占页面空间，不在父容器中管辖

float属性： left(沿左浮动)，right(沿右浮动)

顶部塌陷问题：

元素设置浮动后，父容器就不再被撑开，恢复原始大小

clear(清除浮动)：

right：清除右浮动

left：清除左浮动

both：清除左右浮动

none：不清除浮动

overflow(适应溢出元素的大小)：

visible：内容不会被修改，会显示元素边框外

auto：如果内容被修改，则会以滚动条显示

hidden：内容会被修改，其余内容不可见

scroll：内容会被修改，其余内容在浏览器的滚动条下显示

五，元素定位

定位(position)可以使元素在网页的指定位置显示，开启定位的元素都会转化成块级元素

定位的四种类型：

static(默认)：静态定位，元素不可以设置定位，相当于没有定位

absolute：绝对定位，这个定位的参照位置是body元素

relative：相对位置，这个定位的参照位置是当前位置本身

fixed：固定定位，这个参照是浏览器，元素相对于浏览器定位，可用于导航栏

绝对定位和相对定位的混合使用：在父元素中设置绝对定位，子元素设置相对定位，子元素的参照就是父元素

 

 

路漫漫其修远兮,吾将上下而求索