叮~学习前端的第一周总结~HTML&CSS简介

最新推荐文章于 2024-10-08 17:48:41 发布

m0_60971856

最新推荐文章于 2024-10-08 17:48:41 发布

阅读量107

点赞数

分类专栏： HTML&CSS 文章标签：前端

本文链接：https://blog.csdn.net/m0_60971856/article/details/119723233

版权

HTML&CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

W3C：web技术领域最权威和影响力的技术标准机构
三个学习网站：W3school 、W3C中国、W3C
HTML:Hyper Text Markup Language超文本标记语言，用于定义文档的内容架构。（标记性语言）
CSS:Cascading Style Sheets 层叠样式表，用于定义html文档的样式。（表示性语言)

HTML简介

一、HTML5的变化：（08年发布草案，12年形成稳定版本）

标签的变化：

- doctype，meta；
- 新增语义化标签和属性；
- 去掉了纯展示性的标签；
- 添加canvas、video、audio、本地存储、拖拽。

语法的变化：

- 标记不区分大小写，推荐小写；
- 空标记可以不闭合；
- 属性值可以不添加引号，推荐双引号；
- 属性值中包含true和false的可以省略。

二、HTML注释：

- 主要用于描述代码功能
- 浏览器解析HTML代码时会忽略注释内容

三、HTML元素：通过<元素名称>识别，

- 包括开始标记、结束标记、元素内容。
- 是HTML文档的重要组成部分；
- 单标记<meta>、<img>、空标记、自闭和元素

- 嵌套：

- 一个元素放入另一个元素中，形成嵌套的层次结构；
- 不能相互嵌套；
- 形成树状结构；父子关系，兄弟关系，祖先关系，后代关系

块级元素：独占一行，不能与其他任何元素并列，可设置宽高

行内元素：可以与其他行内元素并排，不能设置宽高

1、结构元素：

div 来划分区域，无明确语义

语义化结构标记：header 用于展示页面或某个区域的头部

nav 导航栏同一网站内的其他页面

article 表示文章（主要内容），其他可独立页面存在的内容

aside 跟周围主题相关的附加信息

section 表示一个整体的一部分主题（章节）

footer 表示页面或某个区域的脚注

2、文本元素：

h1~h6	一级标题
p	段落
strong	重要的文本（在语义上强调文本的重要性）粗体
b	突出显示的文本（语义上意味着在文本上突出的文本）
em	强调的文本（语义上用来在文本上加上强调—斜体）
i	应区别对待的文本（像是放在引号中的文本）
blockquote	整段的引用
cite	对参考文献的引用
q	小段文本的引用
abbr	对缩写词的引用
span	跨越多个字符
a	超链接

<a href="目标" target="页面打开位置">内容</a>
<!--
    target属性控制新页面打开的位置
    _blank 在新页面打开
            <a href="index.html" target="_blank">点击</a> 

    _self 默认情况，在当前页面打开
            <a href="index.html" target="_self">点击</a>
-->

3、路径

相对路径：指向同一网站的其他页面

书写格式：/* ./跳出本文件 */
        <a href="./html/index.html" target="_self">点击</a>

         /* ../跳出文件所在的文件夹 */
        <link rel="stylesheet" href="../css/ten.css">

绝对路径：h r e f 属性必须包含完整域名

书写格式：协议//域名/目录
使用场景：访问站外资源，只能使用绝对路径；
         访问站内资源，推荐使用相对路径。（绝对路径网站已部署可省略协议和域名）

4、实体字符

上标<sup>下标<sub>

显示结果	描述	实体名称
	空格	&nbsp ;
<	小于符号	&lt ; 全称 less than
>	大于符号	&gt ; 全称 greater than
&	并且符号	&amp ;
©	版权符号	&copy ;
®	注册符号	&reg ; 全称 register

- HTML属性：包括属性名、属性值

四、 DOCTYPE：

- 定义文档类型，通知浏览器文档正在使用哪一个版本的HTML，必须放在开头
- 所影响的渲染模式：

- Quirks Mode 怪异模式；
- Almost Standard Mode 准标准模式；
- Standard Mode 标准模式。

五、文档头部 head：

- 包含所有的元数据（页面有关的附加信息）；
- 是html元素的第一个子元素；
- 元素的内容不会显示在页面上，但通常包含了其他元素。

CSS简介

CSS（Cascading Style Sheets）层叠样式表/级联样式表；一种用来表现HTML文件样式的计算机语言，最新版本为CSS3。
发展史：CSS1发布于1996年12月17日；3.0更注重模块化。

一、CSS引用：（样式表优先顺序：就近原则内嵌>内联>外联）

1.外部样式表（外联） :在head标签里通过<link>标签引入CSS

特点：实现了结构与表现的代码完全分离
方便复用及维护
因为分离到各自的文件中，让HTML文件大小大幅减少了，从而让页面结构更容易被程序员和网络爬虫读懂

<link rel="stylesheet" href="text.css">

2. 内部样式表（内联）:在head标签里通过<style>标签书写CSS代码

   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <link rel="stylesheet" href="ten.css">
       <style>
           p{
               color: aqua;
           }
       </style>
   </head>

3. 行内样式表（内嵌）:在开始标记通过style属性书写CSS语句

           <h1 style="color: aqua;font-size: 26px;">
               今晚吃什么？
           </h1>

4. 导入样式表：@import

二、CSS注释：

快捷键：ctrl+？
书写格式：/*注释内容*/

三、CSS选择器：

1. 元素选择器：选中页面内所有该元素

书写格式：标记名{/*声明块*/} 
p{
    color: aqua;
    font-size: 26px;
}

2. 类选择器：一个元素可以有多个类名

```css
书写格式：.类名{/*声明块*/}
取类名：禁止纯数字或数字开头；望名知意
驼峰命名法从第二个单词开始后面的单词开头字母大写 footerTop；
匈牙利命名法单词间加"_" footer_top
使用单词间加"-"分隔符 footer-top

 .footer_top{
    font-size: 100px;
    color: chartreuse;
    background-color: cornflowerblue;
    text-align: center;
}

3. id选择器：一个元素只能有一个id名；如果页面中id名出现过一次，就不能再出现。

书写格式：#id名{/*声明块*/}

#menu{
    font-size: 30px;
    color: blueviolet;
}

4. 子集选择器：只能一层一层选择

书写格式：父元素>子元素{/*声明块*/}

div>h1{
    font-size: 100px;
    color: chartreuse;
    background-color: cornflowerblue;
    text-align: center;
}

CSS重置技术网址：meyerweb.com/eric/tools/css/reset

代码放在顶部

推荐网站：掘金 CSDN 语雀博客园