Html与Css的简单介绍（⼀）
1. HTML与CSS
1.1 HTML
HTML是⼀种超⽂本标记语⾔，⽤于告诉浏览器如何构造页⾯，“超⽂本”指的是构造的页⾯可以包含图⽚、链接、⾳乐以及程序等⾮⽂字元素，HTML⽂件的后缀名有.html与.htm，⼤部分都是.html。
1.2 HTML特点
1.简易性：超⽂本标记语⾔版本升级采⽤超集⽅式，因此更加灵活⽅便。
2.可扩展性：超⽂本标记语⾔的⼴泛应⽤带来了加强功能、增加标识符等要求，超⽂本标记语⾔采取⼦类元素的⽅式，为系统扩展带来保证。
3.平台⽆关性：超⽂本标记语⾔可以使⽤在⼴泛的平台上，这也是万维⽹（WWW）盛⾏的另⼀个原因。
4.通⽤性：Html是⽹络的通⽤语⾔，⼀种简单、通⽤的全置标记语⾔。它允许开发者制作⽂本与图⽚相结合的复杂页⾯，这些页⾯可以被⽹上任何⼈浏览（⽆论使⽤的是什么类型的电脑或浏览器）。
1.3 ⽹页三要素
结构
HTML：⽹页框架构建，⽤于描述页⾯的结构
表现
CSS ⽤于控制页⾯中元素的样式，颜⾊，字体，背景
⾏为
JS ⽤于响应⽤户操作 动态+操作
2. 开发环境
2.1 开发⼯具推荐
Sublime（推荐）
特点：运⾏速度快、代码提⽰、⾼亮显⽰、插件拓展、html 插件emmet、sublime text3 安装emmet插件；
VSCode（推荐）
手机上可以打html与css的app特点：丰富的插件⽀持、可进⾏git管理；
VSCode插件推荐：
HTML CSS Support - Html提⽰Css⾃动补全
HTML Preview - 提供预览HTML⽂档的功能
HTML Snippets - 完整的HTML标签，包括HTML5⽚段
Live Server - 启动⼀个开发本地服务器，为静态和动态页⾯提供实时重 载功能
open in browser - 可以在默认浏览器或应⽤程序中打开当前⽂件。
2.2 主流浏览器
Google Chrome（⾕歌）、Firefox（⽕狐）、Opera、Safari、Microsoft Edge
使⽤⾕歌和⽕狐就可以满⾜初学的开发⼈员进⾏兼容性测试
3. HTML的简单介绍
3.1⽂档结构
</html
快捷⽅式：ctrl+/
⽤于给其他开发⼈员表述代码结构
3.3 块级元素
3.3.1 块级元素的作⽤
搭建⽹页结构
3.3.2 块级元素的特点
独占⼀⾏
默认宽度为100%，⾼度由⼦元素或内容决定，可通过css指定其宽度
可以包含块级元素和⾏内元素
3.3.3 元素
html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address…
最常⽤的的是：div、p、h1~h6、ul->li、ol->li、
建议：最好不要将块级元素嵌套在⾏内元素中，否则块级元素会将⾏内元素顶到⼀⾏，会造成⾏内元素也独占⼀⾏的错觉
元素作⽤已有CSS效果
div⽆意义的块元素⽆
h1~h3标题标题margin font-size font-weight p段落margin
ul,li⽆序列表margin padding list-style
ol,li有序列表margin padding list-style dl,dt,dd定义列表dl - margin dd - margin
html⽆
body margin
在不⽀持Html5的浏览器中，浏览器⽆法识别Html5新增标签，所以默认将这些标签设置为⾏内元素，为了兼容性，需要将这些元素设置为块级元素（使⽤display属性）
H5新增的语
义化标签
作⽤意义
header 头部（不限定页⾯中
该元素个数）
具有引导和导航作⽤的结构元素，可以包含标题、搜索栏或logo等
footer 尾部（不限定页⾯中
该元素个数）
作为其上层⽗级内容区块或是⼀个根区块的脚注
nav导航栏⽤作页⾯导航的链接组，跳转到其他页⾯或当前页⾯的⽽其他部分article⽂档可以独⾃被外部引⽤的内容，也可以嵌套使⽤，例如博客，⽂章等section区块⽤来做结构划分
aside附属信息定义其所处内容之外的内容，例如对当前页⾯或主要内容相关的引⽤等
address联系信息包括⽂档作者或⽂档维护者名字，⽹站链接，电⼦邮箱，真实地址，电话号码，以及跟⽂档相关的联系⼈的所有联系
信息等等
figure&
figcaption
元素的组合表⽰⽹页上⼀块独⽴内容，将其从⽹页上移除后不会对⽹页上的其他内容产⽣任何影响，多⽤于⽂档中插图的图像
details 标识该元素内部的⼦元素可以被展开，收缩显⽰的元素，拥有open和summary属性，open默认为false，表⽰⾥⾯⼦元素被收缩，summary为标题信息，默认为详情⼆字，可以更改
3.4 ⾏内元素
3.4.1 ⾏内元素的作⽤
在结构中填充⽹页内容
3.4.2 ⾏内元素的特点
与其他⾏内元素共享⼀⾏
宽⾼由⾃⾝决定
不可以通过css指定其宽度
⾏内元素中相对块级元素，只能包含⾏内元素3.4.3 元素
span、a、img、strong、b、i、em、sub、sup…
特殊的⾏内元素（置换元素）：img和input⾃带宽⾼，可以设置宽⾼
3.5 块级元素和⾏内元素的区别（⾼频⾯试题 80%）块级元素独占⼀⾏，⾏内元素共享⼀⾏
块级元素可以通过css设置宽⾼，⾏内元素不可以（若想给⾏内元素设置宽⾼，通过CSS将⾏内元素的display属性设置为inline-block 或者block）
块级元素元素可以包含⾏内元素和块级元素，⾏内元素只能包含⾏内元素
4. 相对路径和绝对路径
4.1 相对路径
.代表当前⽬录(当前⽂件所属的⽂件夹⽬录)
./可以省略
…代表上级⽬录(当前⽂件所属⽂件夹的⽗⽂件夹⽬录)
…/不可以省略
4.2 绝对路径
本地路径 file://d://briup/2htmlcss/day02/1-box.html
例如：⼭西省太原市尖草坪区xxx号3栋201
5. 基础标签的使⽤
- a 标签
跳转链接标签
属性
href：设置跳转路径（相对路径、绝对路径 和URL）
target：决定跳转页⾯的打开位置
-self 在当前窗⼝中打开
-blank 在新窗⼝打开注意点a标签可以让⽂字和图⽚被点击a标签必须有href属性
a标签href属性指定URL地址时，必须在地址前⾯加上或者
- img 标签
显⽰图⽚标签
属性<a href ="img2.baidu/it/u=552848653,3304151944&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></a >
1<img src ="" alt ="由于⽹络原因，图⽚加载失败" width ="150" title ="可爱图⽚">1
src：设置⼀个图⽚的路径（绝对路径、相对路径，最好使⽤相对路径）
alt：当图⽚不能显⽰时，对图⽚的描述
width：设置图⽚的宽度
height：设置图⽚的⾼度
title：当⿏标悬停时，弹出的描述框中显⽰的内容注意点px 单位名称为像素，相对长度单位，像素px是相对于显⽰器屏幕分辨率⽽⾔的如果不设置img标签的宽度和⾼度，那么图⽚就会按照默认的样式显⽰，如果设置了宽⾼，img就会按照设置的宽⾼来显⽰。只需要设置图⽚的宽或⾼，⾃适应本⾝⽐例，若同时设置两个属性，则图⽚本⾝⽐例会被破坏，图⽚可能会失真
⼀般除了⾃适应的页⾯，不建议设置width和height
- p 标签
段落元素标签
注意点
p标签中的⽂字会独占⼀⾏，且段与段之间会有默认间距（16px的上下margin）
- h 标签
标题标签
有六级标题标签，h1~h6，在显⽰效果上，h1最⼤，h6最⼩注意点h1最重要，表⽰⼀个⽹页中的主要内容，h2~h6重要性依次降低对于搜索引擎来说，h1的重要性仅仅次于title，搜索引擎检索完title会⽴即检索h1中的内容⼀个页⾯最好只写⼀个h1标签
⼀般的页⾯中，我们只使⽤h1 h2 h3，其他的基本不⽤
- br 标签
换⾏标签注意点br标签是⼀个⾃结束标签
br标签的语义是不另起⼀个段落换⾏, ⽽在企业开发中⼀般情况下需要换⾏都是因为需要另起⼀个段落, 所以在企业开发中很少使⽤br标签<p > p 标签中的⽂字会独占⼀⾏，且段与段之间会有默认间距（16px 的上下margin ）</p >1 <h1>H1</h1>    <h2>H2</h2>    <h3>H3</h3>    <h4>H4</h4>    <h5>H5</h5>    <h6>H6</h6>1
2
3
4
5
6
<br >1

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。