2023年6月20日发(作者：)

Html与Css的简单介绍（⼀）1. HTML与CSS1.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（推荐）特点：丰富的插件⽀持、可进⾏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⽂档结构8293637 3.2 注释快捷⽅式：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、建议：最好不要将块级元素嵌套在⾏内元素中，否则块级元素会将⾏内元素顶到⼀⾏，会造成⾏内元素也独占⼀⾏的错觉元素divh1~h3pul,liol,lidl,dt,ddhtmlbody作⽤⽆意义的块元素标题标题段落⽆序列表有序列表定义列表已有CSS效果⽆margin font-size font-weightmarginmargin padding list-stylemargin padding list-styledl - margin dd - margin⽆margin在不⽀持Html5的浏览器中，浏览器⽆法识别Html5新增标签，所以默认将这些标签设置为⾏内元素，为了兼容性，需要将这些元素设置为块级元素（使⽤display属性）H5新增的语义化标签作⽤意义header头部（不限定页⾯中该元素个数）尾部（不限定页⾯中该元素个数）导航栏⽂档区块附属信息具有引导和导航作⽤的结构元素，可以包含标题、搜索栏或logo等footer作为其上层⽗级内容区块或是⼀个根区块的脚注navarticlesectionaside⽤作页⾯导航的链接组，跳转到其他页⾯或当前页⾯的⽽其他部分可以独⾃被外部引⽤的内容，也可以嵌套使⽤，例如博客，⽂章等⽤来做结构划分定义其所处内容之外的内容，例如对当前页⾯或主要内容相关的引⽤等包括⽂档作者或⽂档维护者名字，⽹站链接，电⼦邮箱，真实地址，电话号码，以及跟⽂档相关的联系⼈的所有联系信息等等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/ 例如：⼭西省太原市尖草坪区xxx号3栋2015. 基础标签的使⽤- a标签跳转链接标签1属性 href：设置跳转路径（相对路径、绝对路径 和URL） target：决定跳转页⾯的打开位置 -self 在当前窗⼝中打开 -blank 在新窗⼝打开注意点a标签可以让⽂字和图⽚被点击a标签必须有href属性a标签href属性指定URL地址时，必须在地址前⾯加上或者- img标签显⽰图⽚标签1属性 src：设置⼀个图⽚的路径（绝对路径、相对路径，最好使⽤相对路径） alt：当图⽚不能显⽰时，对图⽚的描述 width：设置图⽚的宽度 height：设置图⽚的⾼度 title：当⿏标悬停时，弹出的描述框中显⽰的内容注意点px 单位名称为像素，相对长度单位，像素px是相对于显⽰器屏幕分辨率⽽⾔的如果不设置img标签的宽度和⾼度，那么图⽚就会按照默认的样式显⽰，如果设置了宽⾼，img就会按照设置的宽⾼来显⽰。只需要设置图⽚的宽或⾼，⾃适应本⾝⽐例，若同时设置两个属性，则图⽚本⾝⽐例会被破坏，图⽚可能会失真⼀般除了⾃适应的页⾯，不建议设置width和height- p标签段落元素标签1注意点 p标签中的⽂字会独占⼀⾏，且段与段之间会有默认间距（16px的上下margin）- h标签标题标签有六级标题标签，h1~h6，在显⽰效果上，h1最⼤，h6最⼩123456注意点h1最重要，表⽰⼀个⽹页中的主要内容，h2~h6重要性依次降低对于搜索引擎来说，h1的重要性仅仅次于title，搜索引擎检索完title会⽴即检索h1中的内容⼀个页⾯最好只写⼀个h1标签⼀般的页⾯中，我们只使⽤h1 h2 h3，其他的基本不⽤- br标签换⾏标签1注意点br标签是⼀个⾃结束标签br标签的语义是不另起⼀个段落换⾏, ⽽在企业开发中⼀般情况下需要换⾏都是因为需要另起⼀个段落, 所以在企业开发中很少使⽤br标签

H1

H2

H3

H4

H5

H6

p标签中的⽂字会独占⼀⾏，且段与段之间会有默认间距（16px的上下margin）

-hr标签分割线标签1

---

-base标签统⼀当前页⾯中a标签中的页⾯的打开⽅式11注意点必须写在head标签中优先a标签中设置的页⾯打开⽅式-假链接点击后不需要跳转的的链接称为假链接12-锚点通过锚点找到对应id，跳转到对应位置回到顶部点我啊 百度 百度829 跳转到中部 跳转到其他页⾯ -video标签（Html5新增标签）播放视频属性属性autoplaycontrolsloopmuted值autoplaycontrolsloopmuted描述加载进页⾯后⾃动播放视频显⽰控件，⽐如播放按钮、控制条视频播放完毕之后循环播放，⼀般⽤于做⼴告视频静⾳播放视频posterpreloadsrcwidthURLpreloadurlpx视频没有播放之前或者下载视频时显⽰的占位图⽚视频在页⾯加载时进⾏加载，并准备好播放，若使⽤ “autoplay”，该属性忽略需要播放的视频地址设置视频播放器的宽度height属性px值设置视频播放器的⾼度描述注意点五⼤浏览器都不愿意⽀持别⼈的视频格式，因此没有任何⼀种视频格式是所有的浏览器都⽀持的通过video标签播放视频有⼀个前提条件,，就是浏览器必须⽀持HTML5标签, 否则⽆法播放⽼的浏览器是不⽀持HTML5标签的, 为了让这些浏览器能够使⽤video标签来播放视频，我们可以使⽤JS的框架（html5media）来实现在不同浏览器中autoplay的效果不⼀样，例如在⽕狐中⼀加载进页⾯就会⾃动播放，但是在⾕歌需要搭配muted属性才会⾃动播放-audio标签（Html5新增标签）播放⾳频1234属性属性值autoplaycontrolsloopmutedpreloadurl描述⾳频在加载进页⾯后马上播放显⽰控件，⽐如播放按钮，、控制条⾳频播放完毕之后循环播放静⾳播放⾳频⾳频在页⾯加载时进⾏加载，并准备好播放，若使⽤ “autoplay”，该属性被忽略⾳频的 URL地址注意点audio标签的使⽤和video标签的使⽤基本⼀样，video中的width、height和poster属性不能使⽤-字符实体标签 在Html中，有些字符是预留的，使⽤这些字符浏览器会误认为他们是标签，因此我们需要使⽤空格字符实体达到我们想要实现的效果，注意在实体名称后需要加上英⽂分号（;） 例如：在代码中，⽆论出现多个空格或者换⾏，浏览器都会将其解析为⼀个空格，若我们想要⼀定的空⽩位置可以使⽤空格字符实体达到我们想要实现的效果。1

此处为         空⽩

显⽰结果描述空格实体名称 <>&"&apos (IE不⽀持)实体编号 <>&"'<>&"’⼩于号⼤于号和号引号撇号￠显⽰结果£¥€§©®™×÷分（cent）描述镑（pound）元（yen）欧元（euro）⼩节版权（copyright）注册商标商标乘号除号¢实体名称£¥&euro§©®&trade×÷¢实体编号£¥€§©®™×÷

2023年6月20日发(作者：)

Html与Css的简单介绍（⼀）1. HTML与CSS1.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（推荐）特点：丰富的插件⽀持、可进⾏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⽂档结构8293637 3.2 注释快捷⽅式：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、建议：最好不要将块级元素嵌套在⾏内元素中，否则块级元素会将⾏内元素顶到⼀⾏，会造成⾏内元素也独占⼀⾏的错觉元素divh1~h3pul,liol,lidl,dt,ddhtmlbody作⽤⽆意义的块元素标题标题段落⽆序列表有序列表定义列表已有CSS效果⽆margin font-size font-weightmarginmargin padding list-stylemargin padding list-styledl - margin dd - margin⽆margin在不⽀持Html5的浏览器中，浏览器⽆法识别Html5新增标签，所以默认将这些标签设置为⾏内元素，为了兼容性，需要将这些元素设置为块级元素（使⽤display属性）H5新增的语义化标签作⽤意义header头部（不限定页⾯中该元素个数）尾部（不限定页⾯中该元素个数）导航栏⽂档区块附属信息具有引导和导航作⽤的结构元素，可以包含标题、搜索栏或logo等footer作为其上层⽗级内容区块或是⼀个根区块的脚注navarticlesectionaside⽤作页⾯导航的链接组，跳转到其他页⾯或当前页⾯的⽽其他部分可以独⾃被外部引⽤的内容，也可以嵌套使⽤，例如博客，⽂章等⽤来做结构划分定义其所处内容之外的内容，例如对当前页⾯或主要内容相关的引⽤等包括⽂档作者或⽂档维护者名字，⽹站链接，电⼦邮箱，真实地址，电话号码，以及跟⽂档相关的联系⼈的所有联系信息等等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/ 例如：⼭西省太原市尖草坪区xxx号3栋2015. 基础标签的使⽤- a标签跳转链接标签1属性 href：设置跳转路径（相对路径、绝对路径 和URL） target：决定跳转页⾯的打开位置 -self 在当前窗⼝中打开 -blank 在新窗⼝打开注意点a标签可以让⽂字和图⽚被点击a标签必须有href属性a标签href属性指定URL地址时，必须在地址前⾯加上或者- img标签显⽰图⽚标签1属性 src：设置⼀个图⽚的路径（绝对路径、相对路径，最好使⽤相对路径） alt：当图⽚不能显⽰时，对图⽚的描述 width：设置图⽚的宽度 height：设置图⽚的⾼度 title：当⿏标悬停时，弹出的描述框中显⽰的内容注意点px 单位名称为像素，相对长度单位，像素px是相对于显⽰器屏幕分辨率⽽⾔的如果不设置img标签的宽度和⾼度，那么图⽚就会按照默认的样式显⽰，如果设置了宽⾼，img就会按照设置的宽⾼来显⽰。只需要设置图⽚的宽或⾼，⾃适应本⾝⽐例，若同时设置两个属性，则图⽚本⾝⽐例会被破坏，图⽚可能会失真⼀般除了⾃适应的页⾯，不建议设置width和height- p标签段落元素标签1注意点 p标签中的⽂字会独占⼀⾏，且段与段之间会有默认间距（16px的上下margin）- h标签标题标签有六级标题标签，h1~h6，在显⽰效果上，h1最⼤，h6最⼩123456注意点h1最重要，表⽰⼀个⽹页中的主要内容，h2~h6重要性依次降低对于搜索引擎来说，h1的重要性仅仅次于title，搜索引擎检索完title会⽴即检索h1中的内容⼀个页⾯最好只写⼀个h1标签⼀般的页⾯中，我们只使⽤h1 h2 h3，其他的基本不⽤- br标签换⾏标签1注意点br标签是⼀个⾃结束标签br标签的语义是不另起⼀个段落换⾏, ⽽在企业开发中⼀般情况下需要换⾏都是因为需要另起⼀个段落, 所以在企业开发中很少使⽤br标签

H1

H2

H3

H4

H5

H6

p标签中的⽂字会独占⼀⾏，且段与段之间会有默认间距（16px的上下margin）

-hr标签分割线标签1

---

-base标签统⼀当前页⾯中a标签中的页⾯的打开⽅式11注意点必须写在head标签中优先a标签中设置的页⾯打开⽅式-假链接点击后不需要跳转的的链接称为假链接12-锚点通过锚点找到对应id，跳转到对应位置回到顶部点我啊 百度 百度829 跳转到中部 跳转到其他页⾯ -video标签（Html5新增标签）播放视频属性属性autoplaycontrolsloopmuted值autoplaycontrolsloopmuted描述加载进页⾯后⾃动播放视频显⽰控件，⽐如播放按钮、控制条视频播放完毕之后循环播放，⼀般⽤于做⼴告视频静⾳播放视频posterpreloadsrcwidthURLpreloadurlpx视频没有播放之前或者下载视频时显⽰的占位图⽚视频在页⾯加载时进⾏加载，并准备好播放，若使⽤ “autoplay”，该属性忽略需要播放的视频地址设置视频播放器的宽度height属性px值设置视频播放器的⾼度描述注意点五⼤浏览器都不愿意⽀持别⼈的视频格式，因此没有任何⼀种视频格式是所有的浏览器都⽀持的通过video标签播放视频有⼀个前提条件,，就是浏览器必须⽀持HTML5标签, 否则⽆法播放⽼的浏览器是不⽀持HTML5标签的, 为了让这些浏览器能够使⽤video标签来播放视频，我们可以使⽤JS的框架（html5media）来实现在不同浏览器中autoplay的效果不⼀样，例如在⽕狐中⼀加载进页⾯就会⾃动播放，但是在⾕歌需要搭配muted属性才会⾃动播放-audio标签（Html5新增标签）播放⾳频1234属性属性值autoplaycontrolsloopmutedpreloadurl描述⾳频在加载进页⾯后马上播放显⽰控件，⽐如播放按钮，、控制条⾳频播放完毕之后循环播放静⾳播放⾳频⾳频在页⾯加载时进⾏加载，并准备好播放，若使⽤ “autoplay”，该属性被忽略⾳频的 URL地址注意点audio标签的使⽤和video标签的使⽤基本⼀样，video中的width、height和poster属性不能使⽤-字符实体标签 在Html中，有些字符是预留的，使⽤这些字符浏览器会误认为他们是标签，因此我们需要使⽤空格字符实体达到我们想要实现的效果，注意在实体名称后需要加上英⽂分号（;） 例如：在代码中，⽆论出现多个空格或者换⾏，浏览器都会将其解析为⼀个空格，若我们想要⼀定的空⽩位置可以使⽤空格字符实体达到我们想要实现的效果。1

此处为         空⽩

显⽰结果描述空格实体名称 <>&"&apos (IE不⽀持)实体编号 <>&"'<>&"’⼩于号⼤于号和号引号撇号￠显⽰结果£¥€§©®™×÷分（cent）描述镑（pound）元（yen）欧元（euro）⼩节版权（copyright）注册商标商标乘号除号¢实体名称£¥&euro§©®&trade×÷¢实体编号£¥€§©®™×÷