编程技术

Document

htmlcss

htmlcss

一、html

1.1含义

HTML是HyperText Markup Language(超⽂本标记语⾔)
它不是⼀种编程语⾔，⽽是⼀种标记语⾔，⽤于告诉浏览器如何构造你的⻚⾯。它可以由⼀系列HTML元素组合成
web开发⼈员想要的简单或者复杂的⻚⾯。“超⽂本”就是指⻚⾯内可以包含图⽚、链接，甚⾄⾳乐、程序等⾮⽂字
元素。

1.2发展历史

①HTML 1.0：在1993年6⽉作为互联⽹⼯程⼯作⼩组(IETF)⼯作草案发布。
②HTML 2.0：1995年1 1⽉作为RFC 1866发布，于2000年6⽉发布之后被宣布已经过时。
③HTML 3.2：1997年1⽉14⽇，W3C推荐标准。
④HTML 4.0：1997年12⽉18⽇，W3C推荐标准。
⑤HTML 4.01（微⼩改进）：1999年12⽉24⽇，W3C推荐标准。
⑥HTML 5：2014年10⽉，HTML5是公认的下⼀代Web语⾔，极⼤地提升了Web在富媒体、富内容和富应⽤等⽅⾯的
能⼒，被喻为终将改变移动互联⽹的重要推⼿。Internet Explorer 8及以前的版本不⽀持。

1.3html特点

  • 简易性：采用超集方式
  • 可扩展性：超⽂本标记语⾔的⼴泛应⽤带来了加强功能，增加标识符等要求，超⽂本标记语⾔采取⼦类 元素的⽅
    式，为系统扩展带来保证。
  • 平台无关性：：虽然个⼈计算机⼤⾏其道，但使⽤MAC等其他机器的⼤有⼈在，超⽂本标记语⾔可以使⽤ 在⼴泛的
    平台上，这也是万维⽹（WWW）盛⾏的另⼀个原因。
  • 通用性：html是网络的通用语言

1.4编译工具

记事本、sublime、vscode、idea

1.4.1使用代码编辑器的优点

  • 良好的代码提示
  • 帮助维护项目结构
  • 帮助维护文件编码（一般会统一项目的编码为utf-8）

二、css层叠样式表

2.1结构表现行为

结构
HTML⽤于描述⻚⾯的结构
表现
CSS⽤于控制⻚⾯中元素的样式
⾏为
JavaScript⽤于响应⽤户操作

三、标签

3.1html文档结构

3.1.1根元素标签

head>：文档头，网页信息描述，内容不会直接呈现在页面上

body>：文档体，网页视图区，会直接显示到网页中

3.1.2注释

3.2html元素类型

3.2.1单标签

hr：一条直线，样式自定义

br：换行，会独占一行

img：图片

等等

3.2.2双标签

html中大部分是双标签

例：p：段落，会自动换行

3.2.3html核心属性

  • id：给某个元素加上唯一标识
  • class：将和他年龄文档中某一些元素归为一类
  • title：一个元素的描述信息
  • style：行内样式，元素专属样式

3.2.4实体

&nbsp；空格

&gt；大于号

&lt；小于号

&copy；版权符号

3.2.5块级元素

块级元素p

特点：（面试会考）

  1. 独占一行
  2. 默认宽度为100%
  3. 高度有子元素或内容决定
  4. 可以自由的调整宽高

3.2.6行级元素

行级元素span

特点：（面试会考）

  1. 与其他行内元素共享一行空间
  2. 宽高由自身内容决定
  3. 无需通过css指定其宽度
  4. 行内元素不可以嵌套块元素

3.2.7基础标签

1.标题元素：h1-h6（字体从大到小）样式默认加粗

2.段落元素：p

3.换行元素：br，如果不用来换行，会独占一行

4.水平线元素：hr

5.图片元素：在网页中显示一张图片，提供图片路径（本地和外部）

​ 绝对路径：Windows从系统盘符下，Linux从/目录，往下去寻 找一个文件，直到找到它为止

​ 相对路径（经常使用）：以某个文件夹作为根目录，往下去寻找某个文件，找到为止

3.2.8超链接

a：用于网页中页面之间的跳转

herf属性用于指定跳转的地址（内部页面和外部链接）

target="_blank"属性可以打开一个新标签去展示链接内容

假链接格式：1.# 直接回到页面的顶部

​ 2.javascript: 不会自动回到页面的顶部

<a href="mailto:name@email.com">Email</a>

3.2.9其他标签

1.em：强调，突出文章重点

2.strong：强调，内容

3.b：加粗

4.i：斜体

5.u：下划线

6.div：无语义标签，块元素

7.span：无语义，专门用来选中文字，设置文字样式

8.video：播放视频web网页中专用的视频格式（mp4）

格式:<video src=""></video>

属性：src:告诉video标签需要播放的视频地址

​ autoplay:⽤于告诉video标签是否需要⾃动播放视频

​ controls:⽤于告诉video标签是否需要控制条

​ poster:⽤于告诉video标签视频没有播放之前显示的占位图片

​ loop:⼀般⽤于做⼴告视频，⽤于告诉video标签视频播放完毕之后是否 需要循环播放

​ muted:静⾳

​ 第二种格式：

  <video>
 <source src="" type=""></source>
 <source src="" type=""></source>
</video>

可以解决浏览器适配问题

9.audio：播放音频

<audio src=""></audio>
<audio>
 <source src="" type="">
</audio>

和video大致相同，但是height/width/poster属性不能用

3.2.10语义化标签

1.header：是⼀种具有引导和导航作用的结构元素，通常⽤来放置整个页面或页面内的⼀个内容区块的标题，但也可以包含搜索表单或logo。

2.nav：是⼀个可以⽤作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。

3.article：代表⽂档，页面或应⽤程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是⼀篇博客或者报刊中的文章，⼀篇论坛帖子，⼀段用户评论或者独⽴的插件，或其他任和独立的内容。

4.section：作为文档独立的功能

5.aside：元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，⼴告，导航条，以及其他类型的有别于主要内容的部分。

6.footer：元素作为其上层父级内容区块或是⼀个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，⼀个页面中也未限定footer元素的个数。

7.address：元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电⼦邮箱，真实地址，电话号码，以及跟文档相关的联系⼈的所有联系信息。

8.figure&figcaption：figure是⼀种元素的组合，带有可选标题，figcaption元素表示figure元素的标题，⼀个figure元素内最多只允许放置⼀个figcaption元素，

9.detials：是⼀种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字，也可以放置表单,插件或对于⼀个统计图提供的详细数据表格。