HTML+CSS WEB前端开发总结

初识Html

HTML, 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。


基本结构

 声明文件语言类型 H5文档头
  ####    包裹所有标签
     ### 头部标签 包裹网页相关信息
    #### 设置字符集 中文 gb2312 GBK(早期的)UTF-8(全世界所有语言的字符集编码)
        
    这是我的第一个网页####  设置网页名字
   
   ###包裹网页内容 肉眼看到的
   


基本元素属性

标签 定义
h1-h6 标题标签
a 超链接标签 通过 href属性控制跳转地址 可以在新的页面打开 也可以在当前页打开
p 段落标签
b 字体加粗
u 字体下划线
s 字体删除线
i 字体斜体

横线

换行
div 无意义标签
span 无意义标签
img 图片一般通过src属性给图片路径 可单独设置宽高

行内元素和块级元素

独占一行的是块级标签(元素)行内标签(元素)可以跟其他元素在同一行

列表

1.无序列表 ul+li
2.有序列表 ol+li

表格

使用table标签 包含tr标签(代表行)tr标签包含th(加粗)或者td


路径

1.绝对路径 相对于操作系统所处在的位置
2.相对路径 相对于当前文件 目标文件所在的位置 ../(返回上一级)./(当前目录)
3.网络路径


初始CSS


什么是CSS

层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表、级联样式表、串接样式表、阶层式样式表,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。当前最新版本是CSS2.1,为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持,而下一版的CSS4仍在开发中。


CSS引入方式

1.将CSS语句写在style标签中 style写在head标签中
2.使用link标签将CSS文件引入
3.在标签的style属性写CSS语句


语法

1>标签选择器
标签名{
    属性:值
}

2>class选择器
.类名{
    属性:值
}

3>id选择器
#类名{
    属性:值
}

4>通配符选择器
*{
    属性:值
}

选择器优先级

通配符选择器<标签选择器

代码注释

html注释 
css注释  /*这里写注释*/

解决margin塌陷

在父级加上overflow:hidden


浮动布局

float(浮动):让某个元素浮动起来 就是让元素脱离标准文档流

定位布局

相对定位position:relative会保留原先位置
绝对定位position:absolute不会保留原先位置

注:想要挪动谁,就给绝对定位。同时观察本身父级,如果父级没有定位,就给父级相对定位。否则就不管。

兼容性

条件注释法


                    

你可能感兴趣的:(HTML+CSS WEB前端开发总结)