菜鸟前端日记1（HTML+CSS ）

来源：互联网发布：禁止域名转出万网编辑：程序博客网时间：2024/05/21 19:26

HTML+CSS

HTML
HTML超文本标记语言（Hyper Text Markup Language），是一种用于描述网页文档的准标记语言。
扩展名用.html和.htm都可以，但index.html和index.htm是不同的两个文件。

HTML是一个个成对的标签组成的，标签对中的第一个标签是开始标签，第二个是结束标签。
HTML标签是由尖括号包围的关键词。
少量的标签单个出现。（没有结束标签）
如：

<img/><input/></br><meta>

标签之间是可以相互嵌套的。

HTML的版本
现在有用到的是HTML4.01和HTML5
文档声明：

HTML4.01：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">HTML5：<!DOCTYPE html>

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

HTML标签

<html><head>  <titile> <meta>(设置网页关键字，设置编码，设置网站内容，有利于seo) <link> <script><body> <div>布局用的块<img>d  引入图片  图片热点<p> 段落标签<a> 连接标签  锚点<h1>-<h6> 标题标签<ul> <li> 列表标签<span> 行内标签，没有什么样式<table> <tr><td> <em><strong><br/>

表单标签

<form action  method><input  type=’text,radio,checkbox,button,hidden,password,submit,reset,file’> <select><textarea><label>

标签的分类

块级标签：也叫块元素

独占一行。可设置宽高，行高以及顶和底边距。不设置宽的情况下，是它本身父级的100%。

内联标签：也叫行内元素

和其它元素在一行上，不能设置宽高，行高及顶部距离。宽度就是它包含的文字或图片的宽度，不可改变

内联块标签：也叫内联块元素

–同时具备内联元素和块元素的特点。和其它元素在一行，元素的高宽、行高及顶和底边距都可以设置。

标签的分类

块元素:

    <div>、<p>、<table>、<ul>、<li>、<ol>、h1-h6

行内元素：

<a><span><em><i><strong><b>

行内块级元素：

<img>、<input>

标签类型的转换

转换成块标签：    display:block;转换成行内标签：    display:inline;转换成内联块标签：    display:inline-block

div和table布局的区别

用div布局html渲染时，是加载一行渲染一行。
用table布局html渲染时，是等表格结构及数据都加载完成之后，才渲染出来，现在主要用于数据展示类的布局。

CSS

CSS:层叠样式表，Cascading Style Sheets的缩写，我们常说的css样式就是样式表简称。它的主要功能是美化网页。
扩展名为.css。
功能：美化网页统一站风格。

分类及引入方式：

     1､内部样式：在head标签里<style></style>时     2､行内样式：写在html的标签行里。     3､外链样式：写在以.css为扩展名的文件里，        通过link标签引用：        <link  type=“text/css”  rel=“stylesheet” href=“css的url路径”/>        通过@import标签引用：         @import  url(css文件的路径名)         不推荐使用它，网络慢时样式加载不进来。

优先级：行内样式>内部样式=外链样式

结构、表现、行为分离：
html是网页的结构，css是网页的表现，javascript是网页的行为。

css代码解析:

选择器{属性:属性值;}    ----声明（属性:属性值;）

css选择器

Id选择器 #
一个id名字在一个页面中只能用一次
Class选择器 .
一个名字页面中可以出现多次
标签选择器
标签名tag div span img ul li ….
通配 *
子类选择器
以空格隔开 div ul li
组选择器
以逗号隔开 div,ul,li
伪类选择器
:link :visited :hover :active

选择器优先级：id>class>tag>*
样式
背景：
背景颜色 background-color
背景图片 background-image
背景图片是否平铺 background-repeat
背景图片定位 background-position
背景图片固定 backgroundd-attachment

文本：
文本缩进 text-indent
文本对齐：text-align
文本修饰线 text-decoraction

字体：
字体：font-family
字体大小 font-size
字体粗细 font-weight
字体倾斜 font-style

a链接 :
a:link - 未被访问的链接
a:visited - 已访问的链接
a:hover - 鼠标指针经过链接的上方所有标签都能用
a:active - 鼠标按下去时的链接

列表：
列表图片 list-style-image
列表点的样式 list-style-type

css属性推荐书写顺序
选择器名称｛
位置/显示隐藏；
大小；
文字系列；
背景/边框；
其它(动画类)
｝

盒子模型

padding 内边距
边框到内容的距离

margin 外边距
一个元素的边框到另外一个元素的边框的距离

border 边框
边框大小 border-width
边框颜色 border-color
边框样式 border-style

盒子的宽度=左右padding+左右border+内容宽度
高度同理。

div+css布局概念

用div将整个网页分成一部分一部分，并且填充css样式和标签的过程
Padding : 上右下左
Padding :上左右下
Padding: 上下左右
Margin同上

定位
相对定位：position:relative相对本身

绝对定位：position:absolute绝对定位

-相对带relative的父级，如果没向上级查找直到body

固定定位：position:fixed固定定位-相对于窗口

浮动
浮动产生的问题:
子元素进行浮动，父元素没有设高度的情况下，高度没了，这种情况叫高度塌陷。
解决方法：
1、清除浮动
.clearfix:after{
content:” . “;
clear:both；
display:block；
height：0;
overflow:hidden；
visibility：hidden;
}
2、给父级加{position:relative;overflow:hidden}
3、给父级设置高

border-radius
border-radius：一个值时是四个角
50%圆

两个值（上左下右）（上右下左）
三个值上左上右下左下右
四个值上左上右下右下左

阅读全文

1 0