初学HTML+CSS_shift+alt+a-CSDN博客

本文链接：https://blog.csdn.net/m0_74298353/article/details/127424362

了解什么是HTML、CSS?
VS code编辑器？
浏览器
深入了解网站开发
HTML的基本结构与属性
HTML的基本结构与属性
常用的控制标记
HTML初始代码
HTML注释
HTML语义化
标题与段落
文本修饰标签
图片标签与图片属性
引入文件的地址路径
跳转链接
跳转锚点
特殊符号
无序列表
有序列表
定义列表

了解什么是HTML、CSS?
他们是两种编程语言，一边情况下需要配合使用，是作为网站开发的基础语言。
是做网站的编程语言。
浏览器把代码解析后的样子就是我们看到的网站，如何看到网站的原始代码呢？通过鼠标右键选择查看网页源代码。
如何去写代码？写到哪里呢？
一个网站是由N个网页组成的。每一个网页 .html文件
电视剧，四十集。 .mp4文件

VS code编辑器？
学习编辑器基本使用？
设置：文件→首选项→设置（大小，是否换行 word wrap）
创建文件，创建文件夹，重命名、删除和搜索
ctrl+s：保存
ctrl+a：全选
ctrl+x、ctrl+c、ctrl+v：剪切、复制、粘贴
ctrl+z、ctrl+y：撤销、前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+↓：快速复制一行
alt+↑或↓：快速移动一行

tab：向后缩进
tab+shift：向前缩进
多光标：alt+鼠标左键
ctrl+d：选择相同的下一个

浏览器
市场常用的浏览器：1、谷歌 2、Microsoft Edge 3、QQ浏览器 4、Firefox 5、opera 6、百度 7、360 8、Safari

深入了解网站开发
UI设计师：设计稿
web前端开发工程师（H5开发）
设计稿→代码
数据库里的数据→显示到页面
HTML+CSS
HTML:结构
CSS:样式
web后端开发工程师
JavaScript，与HTML、CSS之间的联系
Web前端三剑客，看上去是三种不同的技术，实际中确实相互搭配使用的。
一、HTML超文本标记语言，HTML是一门描述性语言
1、HTML是用来标记内容的（重在内容组织上）
2、HTML是超文本标记语言的简称，它是一种不严谨的，简单的标识性语言。它用各种标签将页面中的元素组织起来，告诉浏览器该如何显示其中的内容。为什么说HTML不严谨呢?因为HTML标签即使不闭合，也并不会影响页面内容的组织。
二、CSS：层叠式样表，是用来控制网页外观的一种技术
1、CSS是用来修饰内容样式的（重在内容样式美化展示上）、
2、CSS是重叠样式表的简称，它是用来表现HTML文件样式的，简单来说就是负责HTML页面中元素的展现及排版。
3、基本标签，

3、基本标签,推荐写在中。

4、注释：//单行注释 /js多行注释/

四、HTML与CSS及JS的关系

1、这三者99%的情况下都是搭配使用的，但也不是绝对的。

2、HTML与CSS、JS是不同的技术，可以独立存在；

3、HTML一般需要CSS和JS来配合使用，否则单一HTML文档无论是功能还是展示上效果都不理想；

4、CSS一般是不能脱离HTML或XML的，如果CSS脱离了HTML和XML，那就没有存在的必要的；

5、JS可以脱离HTML和CSS而独立存在；

6、JS可以操作HTML和CSS。

HTML的基本结构与属性
HTML：超文本标记语言
超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>
语言：编程语言
标记也可以做标签：
单标签

双标签

<\header>
创建标签的快捷键：单词+tab键→<单词>
标签是可以上下排列，也可以组合嵌套。
HTML常见标签：
<!–…-->:注释
<!DOCTYPE>:文档类型
<a>：锚
<abbr>：缩写
<acronym>:只取首字母的缩写
<address>：文档作者或拥有者的联系信息
<applet>：嵌入的applet
<area>：图像映射内部的区域
<article>：文章
<aside>：页面内容之外的内容
<audio>：声音内容
<base>：页面中所有链接的默认地址或默认目标
<basefont>:页面中文本的默认字体、颜色或尺寸
<bdi>：文本的文本方向，使其脱离其周围文本的方向设置
<bdo>：文字方向
<big>：大号文本
<blockquote>：长的引用
<body>：文档的主体
<br>：简单的折行
<button>：按钮
<canvas>：图形
<caption>：表格标题
<center>：居中文本
<cite>：引用
<code>：计算机代码文本
<col>：表格中一个或多个列的属性值
<colgroup>：表格中供格式化的列组
<command>：命令按钮
<datalist>：下拉列表
<dd>：定义列表中的项目的描述
<details>：元素的细节…

HTML的基本结构与属性
<html>
<head>
<title>…</title>
</head>
<body>
</body>
</html>

<head>和</head>中间可以添加的内容：
<title></title>文件标题声明
<meta></meta>控制标记的动态文件转换声明
<base></base>超链接网址基准参考点
<script></script>JavaScript和VBScript程序
<style></style>stylesheet用来设置排版的声明
<link></link>可引用外部条件，如CSS排版样式

常用的控制标记
（1）跳行<br>
格式：<br>，无属性设置。
（2）段落<p>格式：<p align=”排列方式”>…</p>
（3）水平直线<hr>
格式：<hr>
（4）居中对齐<center>
格式：<center>…</center>
（5）背景色与文字设置
格式：<body bgcolor=”背景色” text=”文字颜色”>，<body leftmargin=”像素” topmargin=”像素”>
（6）标题文字设置
格式：<h1>…</h1><h2>…</h2><h3>…</h3><h4>…</h4><h5>…</h5><h6>…</h6>
（7）HTML的备注
格式：
（8）格式化
格式：<pre>…</pre>
（13）引用文本
格式：<blockquote>…</blockquote>

无序列表和有序列表
无序列表<ul>与<li>

功能：<ul>：无序列表的开始，</ul>：无序列表的结束，<li>…</li>：表示一个无序列表项。
有序列表<ol>与<li>
格式：

功能：<ol>：有序列表的开始，</ol>：有序列表的结束，<li>…</li>：表示一个有序列表项。
无序列表和有序列表的结合应用
格式：

叙述式清单
格式：

功能：<dl>：叙述清单的开始，<dt>：表示一个叙述式列表项，<dd>：表示一个叙述式列表项下的更详细的内容。

表格
表格的标题

HTML注释
写法：<!–注释的内容>→>在浏览器中看不到，只能在代码中看到注释的内容。
（1）把暂时不用的代码注释起来，方便以后使用。
（2）对开发人员进行提示。
快捷添加注释与删除注释：
1、ctrl+/
2、shift+alt+a

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

标题与段落
h标签 p标签
在一个网页中，h1标题最重要，并且.html文件中只能出现一次h1标签。
h5、h6标签在网页中不经常使用。
段落→双标签：<p></p>

文本修饰标签
强调→双标签：
<strong></strong><em
></em>
区别：
1、写法和展示效果是有区别的，一个加粗，一个斜体。
2、strong的强调性更强，em的强调性稍弱。
下标：<sub></sub>
上标：<sup></sup>
删除文本：<del></del>
插入文本:<ins></ins>
注：一般情况下，删除文本都是和插入文本配合使用的。

图片标签与图片属性
<img>：图片（单标签）
src、alt、title、width、height
src：引入图片的地址。
alt：当图片出现问题的时候，可以显示一段友好的提示文字。
title：提示信息
width、height：图片的大小

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>





<h1>xxx简介 </h1>

<h2>基本信息</h2>

<p>xxx,1977年11月13日出生于山东省青岛市,中国内地男演员、歌手,毕业于北京电影学院表演系。</p>

<p>1998年主演个人首部电视剧《爱情不是游戏》进入演艺圈。2001年凭借古装剧《大汉天子》获得关注。自2005年起连续10年入选“福布斯中国名人榜” 。2006年参演古装片《夜宴》;同年正式转向大银幕发展。2007年发行个人首张专辑《It's Ming》。2009年凭借歌曲《好人卡》获得北京流行音乐典礼年度金曲奖。</p>

<p>2010年凭借谍战片《风声》获得第17届北京大学生电影节最受欢迎男演员奖。2011年成立xxx工作室 [383] 。2013年凭借剧情片《中国合伙人》获得中国电影金鸡奖、中国电影华表奖、大众电影百花奖最佳男主角奖 [7-9] 。2015年成为首位在好莱坞中国剧院留下手印的中国内地男演员 [ 。2016年凭借史诗片《大唐玄奘》获得第13届中国长春电影节最佳男主角奖 [ 。2017年主演古装剧《琅琊榜之风起长林》。2018年主演爱情片《无问西东》上映。2019年凭借剧情片《烈火英雄》该片获得第35届大众电影百花奖最佳男主角奖、第33届中国电影金鸡奖最佳男主角奖 [15-16] ;同年担任第32届中国电影金鸡奖评委。2020年主演民国剧《鬓边不是海棠红》 [380] 。2021年主演年代剧《光荣与梦想》播出 [377] 。</p>

<h2>人物经历</h2>

<p>1984年,xxx被电影制片厂的人看中,邀请他担任儿童电影的主角,但是由于他的性格内向,加上见到生人就害羞,于是被制片厂的人替换掉。1996年夏天,xxx参加了北京电影学院的面试,并且得到了崔新琴老师的肯定；同年,他从青岛一中考入北京电影学院表演系本科。1997年,上大二的xxx接拍了第一个广告,并凭借该广告挣了1500元,这也是他挣的第一份钱</p>

<img src="https://img0.baidu.com/it/u=440107185,4227458470&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=614" alt=""title="他是黄晓明"width="300"height="300">

</body>

</html>

引入文件的地址路径
相对路径
1、在路径中表示当前路径
2、在路径中表示上一级路径
绝对路径

跳转链接
a→双标签：<a></a>
herf属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：子啊当前页面打开_self 新窗口打开_black
base→单标签：作用
就是改变链接的默认行为的。

<!DOCTYPE html>

<html lang="en">

<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>

</head>

<body>

<a href="./html/list.html">列表页</a>

<img src="./images/u=2417663470,4209941864&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp" alt="">

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<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>

</head>

<body>

<a href="./detail.html">详情页</a>

<img src="../images/u=3061739439,1864014752&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp" alt="">

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<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>

</head>

<body>

<a href="../index.html">返回首页</a>

<img src="../images/u=3335951083,3641020404&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto.webp" alt="">

</body>

</html>

跳转锚点
实现一
#号
id属性
实现二
#号
name属性
1、#号+id属性
2、#号+name属性（注意name属性加给的是a标签）

1、&+字符
2、解决冲突，左右尖括号，添加多个空格的实现。
3、< >

无序列表
<ul>、<li> ：列表的最外层容器、列表项
注：ul和li必须是组合出现的，他们之间是不能有其他标签的。
type属性：改变前面标记的样式（一般都是用CSS去控制）
1、无序列表→ ul li 符合嵌套的规范

<!DOCTYPE html>

<html lang="en">

<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>

</head>

<body>

<ul type="circle">

<li>第一段</li>

<li>第二段</li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<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>

</head>

<body>

<ul>

<li><a href="#"><strong></strong></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

</ul>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<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>

</head>

<body>

<a href="#html">HTML</a>

<a href="#CSS">css</a>

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

<h2 id="html">HTML超文本标记语言</h2>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<h2 id="CSS">CSS层叠样式表</h2>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<h2 id="JavaScript">JS脚本</h2>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

<p>模拟的段落</p>

</body>

</html>

有序列表
<ol>、<li>:列表的最外层容器、列表项
注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。
有序列表→ol li一般用的比较少，可以用无序列表来实现。

定义列表
<dl>：定义列表
<dt>定义专业术语或名词
<dd>对名词进行解释和描述

<!DOCTYPE html>

<html lang="en">

<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>

</head>

<body>

<dl>

<dt>HTML</dt>

<dd>超文本标记语言</dd>

<dt>CSS</dt>

<dd>层叠样式表</dd>

<dt>JavaScript</dt>

<dd>网页脚本语言</dd>

</dl>

</body>

</html>