HTML+CSS学习（一）

ifjia

已于 2022-11-22 18:43:13 修改

阅读量1.2k

点赞数 1

文章标签： html 前端

于 2022-10-17 18:34:31 首次发布

本文链接：https://blog.csdn.net/ifjia/article/details/127340890

版权

一、HTML+CSS的概况

1、HTML+CSS之拨云见日

HTML、CSS：基础
切图流程：传统切图，智能切图（公司中流行的切图方式）
PC企业站布局，PC游戏站的布局

2、HTML+CSS之溯本求源

HTML、CSS：扩展
HTML5新语法，CSS3新语法
兼容与hack：不同浏览器的兼容问题和解决方案

3、HTML+CSS之风生水起

弹性布局，网格布局，移动端布局
响应式布局：一套代码适应多种设备
（其所基于的框架——bootstrap）

4、HTML+CSS之巧夺天工

工程：预编译CSS、postcss
CSS架构（如何划分文件）
高级功能、CSS与JS交互

二、主要内容

1、HTML+CSS之拨云见日

前瞻

①、什么HTML、CSS？

是两种编程语言，一般情况下需要配合使用，
作为网站开发的基础语言
网站：浏览器解析代码后的样子

HTML:超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本：是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。

CSS:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

②、如何写代码，写在哪里

(注：网站由多个网页构成；每个网页：.html文件)

先创建一个文本文档，在命名后缀名为.html的文件
然后从打开方式中选择一种打开方式，出入相应的代码后保存

③、编译器VS Code(基于Electron轻量代码编译器）

安装插件：
1.语言包
2.open in browser，view in browser（运行网页）
基本使用:
1、新建文件（夹），重命名，删除，搜索（左二）
2、快捷键：
全选（ctrl+a）、剪切（ctrl+x）、保存（ctrl+s）
复制（ctrl+c）粘贴（ctrl+v）、撤销（ctrl+z）、前进（ctrl+y）
从头选中一行（shift+end）、从尾部选中一行（shift+home）
快速复制（shift+alt+↓）、快速移动一行（alt+↑/↓）
向后推进（tab）、向前缩进（tab+shift）多光标（alt+鼠标左键）
选中相同元素（ctrl+d）
3、文件——首选项——设置（换行，字体大小）
换行：设置——Word wra

④、Chrome浏览器

谷歌浏览器（Google Chrome）:快速，轻松，安全
Chrome 下载地址：
https:// www . google . cn /int1/zh- CN / chrome /
五大浏览器：IE、火狐（Firegox）、谷歌（Chrome）、Safari、Opera
请添加图片描述

请添加图片描述

⑤、深入了解网站开发

UI设计师:设计稿
web前端开发工程师（H5开发）：
设计稿——代码
数据库里的数据——显示到页面
HTML：结构
CSS：样式
web后端开发工程师

⑥、web前端的三大核心技术

HTML：结构
CSS：样式
JavaScript:行为
例：在这里插入图片描述

HTML

①、HTML基础结构与属性

HTML:超文本标记语言

超文本：文本+非文本（图片，视频，音频等）

标记(标签）：<单词> 例：header footer
写法有两种：
单标签：<header>
双标签：<footer></foooter>
创建标签的快捷键:单词+Tab
标签可以上下排列，也可以组合嵌套
标签的属性：修饰标签，设置当前标签的一些功能
<标签属性=“值” 属性2=“值”
在这里插入图片描述

②、HTML初始代码

每个html文件都有的代码，要符合html的规范写法
创建初始代码的快捷键：！+Tab

<!DOCTYPE html>     文档说明：告诉浏览器这是html文件
<html lang="en">    html文件最外层标签，包裹着所有html标签代码 
                    lang="en"：表示英文网站   lang"zh-CN":表示中文网站
<head>  头
    <meta charset="UTF-8">   元信息：编写网页中的一些赋值信息
     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>   设置网页的标题
</head>
<body>  主体
    显示网页内容的区域
</body>
</html>

③、HTML注释

注释的代码只能在文件中看到，浏览器显示不出
注释的写法：

<!--注释的内容-->

意义
a、把暂时不用的代码注释起来，方便以后使用
b、对开发人员进行提示
快捷添加注释
a、ctrl+/
b、shift+alt+a

④、HTML语义化

根据网页中内容的结构，选择适合的HTML标签进行编写
优点：
1．在没有 CSS 的情况下，页面也能呈现出很好的内容结构
2．有利于 SEO( 搜索引擎优化)，让搜索引擎爬虫更好的理解网页
3．方便其他设备解析（如屏幕阅读器、盲人阅读器等）
4．便于团队开发与维护

⑤、HTML标题与段落

标题（双标签）：

<h1></h1>
<h2></h2>

<h6>/<h6>

段落（双标签）

<p>内容</p>

在一个网页中，h1标题最重要
并且一个.html文件只能出现一个h1标题
h5，h6标签不经常使用

⑥、文本修饰标签

都是双标签
<strong>：表示强调，会对文本进行加粗
<em>：表示强调，会对文本进行斜体
<sub>、<sup>：下标文本、上标文本
<del>、<ins>：删除文本、插入文本
一般情况下删除文本与插入文本配合使用

<strong>输入的内容</strong>
<em>输入内容</em>

区别：
1、写法和展示效果不同
2、strong的强调性更强，em强调性稍弱

a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
H<sub>2</sub>O 
促销：原价<del>300</del>，现价<ins>100</ins>

⑦、图片标签与图片属性

img标签（单标签）

<img src="" alt="" title="" width="" height="">
scr：引入图片地址
alt：当图片出现问题时，可以出现一段提示词
title：当鼠标移动到图片上出现提示信息
width，height：图片大小

⑧、引入文件的地址路径

相对路径：
**.**表示当前路径
**··**表示上一级路径

<img src="./joker.jpg" > 图片与网页在相同路径
<img src="./img/joker.jpg" >  图片在网页路径中的文件夹里
<img src="../joker.jpg" >  图片在网页路径的上一级

绝对路径：
1、图片在电脑中的具体路径
例：E:/muisc/jokerxue.jpg
2、图片的网址
例：https://img2.baidu.com/it/u=1092484610,2178215898&fm=253&fmt=auto&app=138&f=JPG?w=518&h=500

⑨、跳转链接

a标签（双标签）

例:<a href="" target=“”></a>
href属性：链接地址
target属性：可改变链接的打开方式
默认情况下：在当前页面打开：_self  新窗口打开_blank

base标签（单标签）：改变链接的默认行为
注：常写在head中

例：<base target="">    改变全部链接的跳转方式

⑩、跳转锚点

方法一：
#号 id属性

<a href="#html">html</a>
<a href="#css">css</a> 
<a href="#JavaScript">JavaScript</a>

<h2 id="html">html</h2>
<h2 id="css">css层叠样式表</h2>
<h2 id="#JavaScript">JS脚本</h2>

方法二
#号 name属性(加给的是a标签）

<a href="#html">html</a>
<a href="#css">css</a> 
<a href="#JavaScript">JavaScript</a>

<a name="html"></a>
<h2>html</h2>
<a name="css"></a>
<h2>css层叠样式表</h2>
<a name="JavaScript"></a>
<h2>JS脚本</h2>

⑪、特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符如在这里插入图片描述（注册商标）、（版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在 HTML 中，为这些特殊字符准备了专门的代码

&+字符+；

&lt;html&gt;    <html>
Joker&nbsp;&nbsp;&nbsp;xue     Joker   xue（表示多的空格）

作用：解决字符与代码的冲突

⑫、列表标签

1、无序列表

<ul>,<li>:列表的最外层容器，列表项
注：二者必须组合出现，他们之间不能有其他标签
type属性:改变前面标记的样式（一般都是用CSS控制）
www.w3school.com.cn/tags/att/_ul_type.asp
<ul type="disc">	默认值。实心圆。
<ul type="circle">	空心圆。
<ul type="square">	实心方块

例：<ul type=“”>
        <li>第一项</li>
        <li>第二项</li>
   </ul>

错误写法:
<ul>
     <p>
        <li>第一项</li>
        <li>第二项</li>
    </p>   
</ul>

<ul><li>二者之间不可以有其他标签

2、有序列表

<ol>,<li>:列表的最外层容器，列表项
注：有序列表用的非常少，常用的是无序列表，无序列表可代替有序列表
例：<ol type="">
        <li>第一项</li>
        <li>第二项</li>
   </ol>

<ol reversed>	  reversed	     
规定列表顺序为降序。(9,8,7...)
<ol start="">	  number	     规定有序列表的起始值。
<ol type="">      1 A a I i      规定在列表中使用的标记类型。

3、定义列表

<dl>:定义列表
<dt>:定义专业术语或名词
<dd>:对名词进行解释和描述
例：<dl>
       <dt>html</dt>
       <dd>超文本标记语言</dd>
       <dt>css</dt>
       <dd>层叠样式表</dd>
       <dt>JavaScript</dt>
       <dd>网页脚本语言</dd>
   </dl>