admin 管理员组

文章数量: 1087678

HTML和Css的学习

文章目录

  • 第一部分：
    • 了解学习的目标
  • 第二部分
    • 开始步入学习
      • 1.HTML和Css是做网站的编程语言。
      • 2.VS Code的基本快捷操作
      • 3.网站开发的基本需求
      • 4.初步的代码实践
      • 5.HTML
      • 6.总手敲的代码：
      • 7. 图片标签与图片属性
      • 8.引入文件的地址路径：
      • 9. 链接标签
      • 10.跳转锚点
      • 11.特殊符号：
      • 12.列表标签
      • 13.嵌套列表
      • 14.表格表单
      • 15.Css基础语法
      • 16.Css文字样式
      • 17 .Css段落样式
      • 18.Css的复合样式
      • 19.Css选择器

第一部分：

了解学习的目标

1.拨云见日

Html、Css、切图流程、 PC企业站布局、PC游戏站布局

2.溯本求源

扩展HTML、扩展Css、HTML5新语法、CSS3新语法、兼容与hack

3.风生水起

弹性布局、网格布局、移动端布局、响应式布局、Bootstrap

4.巧夺天工

预编译Css、postcss、css架构、高级功能、css与JS交互

第二部分

开始步入学习

1.HTML和Css是做网站的编程语言。

HTML和Css的介绍：
（浏览器把代码解析后的样子就是我们看到的网站）

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

Css（“Cascading Style Sheet”。CSS 的主要作用是定义网页的样式（美化网页),对网页中元素的位置、字体、颜色、背景等属性进行精确控制。CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式，而且市面上几乎所有的浏览器都支持 CSS ）

2.VS Code的基本快捷操作

需要使用优良的编辑器：VS Code编辑器
ctrl+c：复制
ctrl+v：粘贴
ctrl+x：剪切
ctrl+a：全选
ctrl+s：保存
ctrl+z：撤销
ctrl+y：前进
ctrl+d：选择相同元素的下一个
alt+⬆或⬇：快速移动
alt+鼠标左键：多光标

3.网站开发的基本需求

主流浏览器：Chrome浏览器（2022年7月）
1.UI设计师
2.web前端开发工程师（H5开发）
设计稿→代码
数据库里的数据→显示到页面

HTML+Css：HTML：结构Css：样式JavaScript:行为（ 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画）

3.web后端开发工程师

4.初步的代码实践

    <style>div{ color:red;font-style:italic;}</style><div>HTML+Css</div>

5.HTML

一.HTML基本结构和属性:
HTML：超文本、标记、语言

1.超文本：
文本内容+非文本内容（图片，视频，音频等）

2.标记：单词
标记也叫标签：
快捷键：单词+tab→<单词>
单标签：<header>
双标签：<footer></footer>

<标签 属性="值"属性2="值"属性2>
例：<header title="hello">

3.语言：编程语言

二.HTML初始代码：
快捷键：（！+ tab）

<!DOCTYPE html>		 文档声明（告诉浏览器这是一个html文件）
<html lang="en">	 html文件的最外层标签：包裹着所有html标签代码 	lang="en"英文网站	lang="zh-CN"中文网站<head><meta charset="UTF-8">		元信息：是编写网页中的一些赋值信息<title>Document</title>		设置网页标题
</head>
<body>显示网页内容的区域
</body>
</html>

三.HTML注释：

<!--注释内容-->在浏览器里看不到，只能在代码中看到注释的内容

快速添加注释与删除：

1.ctrl+/
2.shift+alt+a

注释的意义：
1.将暂时不用的代码存储起来
2.对开发人员进行提示

四.HTML语义化：
1.在没有Css的情况下，页面也能呈现出很好的内容结构
2.有利于SEO，让搜索引擎爬虫更好的理解网页
3.方便其他设备解析（如屏幕阅读器，盲人阅读器）
4.便于团队开发与维护

五.标题与段落：
（查看源文件就可以看点网页代码）
1.标题→双标签：
<h1></h1>······<h6></h6>
在一个网页中：
h1标题最重要且只能出现一个
h5和h6不经常使用

2.段落→双标签：<p></p>

六.文本修饰标签：

<strong>：表示强调，会对文本进行加粗
<em>:表示强调，会对文本进行斜体
<sub>：下标文本
<sup>：上标文本
<del>：删除文本
<ins>：插入文本
（删除和插入配合使用）

6.总手敲的代码：

<p><strong>一个需要强调的东西</strong><em>一个需要强调的东西</em>
</p><p>
a<sub>2</sub> +b<sup>2</sup> =c<sup>2</sup>    H<sub>2</sub>  
</p><P>
促销：原价<del>300</del>，现价<ins>100</ins>
</P>

7. 图片标签与图片属性

<img>:图片（单标签→img）
src：引入图片的地址（图片所在网页链接）
alt：当图片出现问题的时候可以显示一段友好的显示文字
title：提示信息
width，height：控制图片的大小（像素）

代码展示：

<img src=""alt=""title=""width、height="">

8.引入文件的地址路径：

1.相对路径：（用\隔开）
.在路径中表示当前路径
..在路径中表示上一级路径
2.绝对路径：
文件夹所在位置D:\visual studio\VB\Bin
网站链接

9. 链接标签

1.a→标签（双标签）
href属性：地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开_self 新窗口打开 _black
（可以与图片链接联合使用）

<a href="/"target="/"_black>访问淘宝</a>

2.base→标签（单标签）：改变链接的默认行为，在<head>中使用

<head>
<base href="" target="">
</head>

10.跳转锚点

实现一：#加id属性：

	<a href="#html">html样式</a><a href="#Css">Css层叠样式表</a><a href="#javascript">java脚本</a><h2 id="html">html样式</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><h2 id="Css">Css样式</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><h2 id="Javascript">java脚本</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p>

实现二：#加name属性（加在a标签内）：

	<a href="#html">html样式</a><a href="#Css">Css层叠样式表</a><a href="#javascript">java脚本</a><a name="html">html样式</a><h2 >html样式</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><a name="Css">Css样式</a><h2 >Css样式</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p><a name="javascript">java脚本</a><h2 >java脚本</h2><p>模拟段落</p><p>模拟段落</p><p>模拟段落</p>

11.特殊符号：

1.&+字符
2.解决冲突啊 左右尖括号、添加多个空格实现

空格符		&nbsp
版权		&copy
注册商标 	&reg
小于号		&lt
大于号		&gt
和号		&amp
人民币		&yen
摄氏度		&deg

12.列表标签

1.无序列表→ul li
ul li：符合嵌套的规范（二者必须组合出现，他们之间不能有其他标签）
type属性：改变前面标记的样式（一般都用Css去控制）

<ul type="circle">
<li>#</li>
</ul>

   <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>（#字用来占位）

2.ol li：一般用的比较少，可以用无序列表来实现
type属性：改变前面标记的样式（一般都用Css去控制）

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

3.dl dt dd列表项：需要添加标题和对标题进行描述的内容

<dl><dt>HTML</dt><dd>超文本标记语言</dd><dt>Css</dt><dd>层叠样式表</dd><dt>JavaScript</dt><dd>网页脚本语言</dd>
</dl>

Type属性：<ul type="">``<ol type="">1.在ul中：disc实心圆circle空心圆square实心方块2.在ol中：1代表数字a代表小写字母A代表大写字母i代表小写希腊字母I代表大写希腊字母

13.嵌套列表

列表之间可以互相嵌套形成多层级列表
例子1：

<ul><li>江苏省<ul><li>徐州</li><li>邳州</li><li>苏州</li></ul>  </li><li>山东省<ul><li>济南</li><li>青岛</li><li>烟台</li></ul></li></ul>

例子2：

    <dl><dt>好美味的小吃</dt><dd><dl><dt>小吃类</dt><dd>煮粉干</dd><dd>拌青菜</dd><dd>蛋炒饭</dd><dd>煎蛋</dd><dd>米饭</dd></dl><dl>    <dt>卤味类</dt><dd>鸭肠</dd><dd>面筋</dd><dd>牛肚</dd><dd>猪耳朵</dd><dd>大肠</dd><dd>鱿鱼</dd></dl><dl><dt>套餐类</dt><dd>卤面筋饭</dd><dd>猪肉肉饭</dd><dd>猪耳朵饭</dd><dd>卤猪脚饭</dd><dd>卤猪舌头饭</dd></dl><dl><dt>炖爆类</dt><dd>猪蹄黄豆</dd><dd>猪肚莲子</dd><dd>猪心枸杞</dd><dd>羊肉枸杞</dd><dd>牛肉枸杞</dd></dl><dt><em>亲,20元以上可送餐哦!!</em></dt></dd></dl>

14.表格表单

1.表格标签：

<table>:表格的最外层容器
<tr>:定义表格行
<th>:定义表格头
<td>:定义表格单元
<caption>:定义表格标题
<tHead>、<tBody>、<tFood>语义化标签
（之间有嵌套关系，要符合嵌套规范）

例子：见下面表格属性

2.表格属性：
border:表格边框
cellpadding:单元格内的空间
cellspacing:单元格之间的空间
rowspan:合并行(上有rowspan=“2”那下面相同的就可以删去)
colspan:合并列
align:左右对齐方式(left,center,right)
valign:上下对齐方式(top,middle,botton)

<table border="1" cellpadding="" cellspacing="">
<tr align="right" valign="top">
<td rowspan="2">内容</td>

    <table border="1"cellpadding="20"cellspacing="5"><caption>购物</caption><tHead><tr><th>班次名称</th><th>科目</th><th>授课内容</th><th>增值服务</th><th>课时</th><th>价格</th><th>试听</th><th>购买</th></tr></tHead><tBody><tr><td rowspan="3">真题精解班</td><td>行测+申论 </td><td>金科历年真题解析</td><td rowspan="3">课后2套模拟卷24小时内答疑</td><td>48</td><td>1280元</td><td>🎧</td><td>🛒</td></tr><tr><td>行测 </td><td>行测历年真题解析</td><td>32</td><td>980元</td><td>🎧</td><td>🛒</td></tr><tr><td>申论 </td><td>申论历年真题解析</td><td>16</td><td>580元</td><td>🎧</td><td>🛒</td></tr><td rowspan="3">高分技巧班</td><td>行测+申论</td><td>金科历年真题解析</td><td rowspan="3">入学试卷测评24小时内答疑</td><td>32</td><td>980</td><td>🎧</td><td>🛒</td></tr><tr><td>行测</td><td>行测历年真题解析</td><td>18</td><td>680</td><td>🎧</td><td>🛒</td></tr><tr><td>申论</td><td>申论历年真题解析</td><td>14</td><td>580</td><td>🎧</td><td>🛒</td></tr></tBody></table>

3.表单标签

<form>:表单的最外层容器
<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件（单标签）text：普通的文本输入框
password：密码输入框
checkbox：复选框
radio：单选框
file:上传文件
submint：提交按钮
reset：重置按钮

例子：

  <form><h2>输入框：</h2><input type="text"placeholder="请输入密码"><h2>密码框：</h2><input type="password"placeholder="请输入密码">		（placeholder提示文字）<h2>复选框：</h2><input type="checkbox"checked>可乐				(checked选定，disabled否定)<input type="checkbox"checked>雪碧<input type="checkbox"disabled>果汁<h2>单选框：</h2><input type="radio"name="gender">男<input type="radio"name="gender">女<h2>上传文件：</h2><input type="file"><h2>提交按钮：</h2><input type="submit"><input type="reset"></form>

<textarea>：多行文本框
<select>、<option>：下拉菜单		（selected被选择，multiple多选择，size出现几项）
<label>：辅助标签
例：
<textarea name="" id="" cols="30" rows="10"></textarea>
<option selected disabled>请选择</option>
<input type="radio"name="gender"id="man"><label for="man">男</label>
<input type="radio"name="gender"id="woman"><label for="woman">女</label>

4.表格表单组合
表格表单之间可以互相组合形成数据展示效果

<form action="">
<table border="1"cellpadding="30"><tBody><tr><td rowspan="4">总体用户信息</td><td colspan="2"align="center">用户注册</td></tr><tr><td>用户名：</td><td><input type="text"placeholder="请输入用户名"></td></tr><tr><td>密码：</td><td><input type="text"placeholder="请输入密码"></td></tr><tr><td colspan="2"align="center"><input type="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset"></td></tr></tBody>
</table></form>

5.<div>与<span>
div（块）:分割，分区，做一个区域划分的块
span（内联）：用来修饰文字的
二者没有默认样式，需配合Css来使用

<div>
<h2><a href="#">内容<span>html5</span>内容</a></h2>
<a href="#"><img src=""alt=""></a>
<p>内容</p>
<a href="#">链接</a>
</div>

15.Css基础语法

一
1.格式：选择器（属性1：值1；属性2：值2）
2.单位：px→像素（pixel）、%→百分比
3.基本样式：width、height、background-color
4.Css注释：/*内容 */
二
1.内联（行内，行间）样式：
在html标签上添加style属性来实现

<body><div style="width:100px;height:100px;background-color:red">我的天哪</div>
</body>

2.内部样式：
style标签
在<style>内添加样式

<title>Document</title><style>div{width:10%;height:10%;background-color:red}</style>

区别：内部样式的代码可以复用、符合w3c的规范标准，进行让结构和样式分开处理
三外部样式：

1.通过<link>标签引入外部资源
rel属性指定资源跟页面的关系
href属性资源的地址

<link rel="stylesheet" href="./地址"><title>Document</title>

2.@import url（‘./#’）有很多问题不建议使用

 <style>@import url(./地址)   </style>

四.Css颜色表示法
1.单词表示法：red,green,blue,yellow
2.十六制表示法:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
#0000000,#fffffff
3.rgb三原色表示法：
rgb（255，255，255）
取值0~255

五.Css背景样式
backgroung-color：背景颜色
backgroung-image：背景图片
backgroung-repeat：背景图片的平铺方式
backgroung-position：背景图片的位置
backgroung-attachment：背景图片岁滚动条的移动方式

#div1{width:100px;height:100px;background-image:url(./图片位置);background-attachment:fixed;}<div id="div1">内容

六.Css的边框样式
1.border-style:边框样式
solid:实线
dashed:虚线
dotted:点线
2.border-width:边框大小
3.border-color:边框颜色

<style>
div{width:100px;height:100px;border-style:solid;border-color:red;border-width:1px;}
</style>

若想对单条边进行设计：border-top-style：solid
transparent：透明色

  <style>div{width:0px;height:0px;border-top-color:red;border-top-style:solid;border-top-width:30px;border-right-color:blue;border-right-style:solid;border-right-width:30px;border-left-color:yellow;border-left-style:solid;border-left-width:30px;border-bottom-color:transparent;border-bottom-style:solid;border-bottom-width:30px;}</style><body><div></div></body>

16.Css文字样式

一.font-family：字体类型
英文字体：Arial，‘Times New Roman’
中文字体：微软雅黑(‘Microsoft YaHei’) 宋体(SimSun)
1.衬线体与非衬线体：
衬线体：是有棱角的
非衬线体：简练，例微软雅黑
2.注意点：
a.多个字体类型的设置目的
b.引号的添加目的（视为一个整体）
二.font-size：字体大小
（字体大小一般为偶数）
写法：
xx-small：最小
x-small：较小
small：小
medium：正常（默认值：16个像素）
large：大
x-large：较大
xx-large：最大
其它：number（px) | 单词（small、large…不推荐使用，像素不一定为偶数）
三.font-weight：字体粗细
模式：
normal（正常）
bold（加粗）
写法：单词（normal、bold）| number（100 200 …900，100到500都是正常的，600到900都是加粗的）
四.font-style：字体样式
模式：
正常（normal）、斜体（italic）
写法：单词（normal、italic）
注：oblique也可以表示斜体
区别：1.italic带有倾斜属性的字体才可以可以设置
2.oblique没有倾斜属性的字体也可以设置的倾斜操作
五.color：字体颜色

<style>
div{color:red}
</style>

六.总代码

<style>#div1{color:red;bold;font-style:italic;font-size:XX-large;font-family:宋体;}#div2{color:green;font-weight:bold;font-style:italic;font-size:XX-large;font-family:'Microsoft YaHei'}</style>
</head>
<body><div id="div1">这是一个块</div><div id="div2">这又是一个块</div>
</body>

17 .Css段落样式

1.text-decoration:文本装饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何修饰：none
注：添加多个文本修饰，通过空格隔开

<style>
p{width:300px;text-decoration:underline line-through overline}
</style>

2.text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize

3.text-indent：文本缩进
首行缩进：em
1em：相对单位 永远都是跟字体大小相同

<style>
p{text-indent:32px;font-size:18px}
</style>

4.text-align:文本对齐方式

5.line-height：定义行高
定义：一行文字的高度，上边距和下边距的等价关系
默认：不是固定值，而是变化的，根据文字当前位子大小不断变化
取值：1.number（px）| scale（比例值，跟文字大小成比例的）

6.letter-spacing：字之间的间距
word-spacing：词之间的间距（针对英文段落）

英文和数字不自动折行问题：
a.word-break：break-all；（非常强烈的折行）
b.word-wrap：break-word；（不怎么强烈的折行）

   <style>p{width:300px;/*text-decoration:underline line-through overline;*/text-indent:2em;text-transform:uppercase;text-align:center;line-height:30px;letter-spacing:1px;}</style>
</head>
<body>
<p>远赴人间惊鸿岩，一度人间盛世颜。满堂花醉三千客,一剑霜寒十四州。</p>
<p> I like you but you don't like me.If i want to company you,i must change myself.</p>
</body>

18.Css的复合样式

复合的写法：是通过空格的方式来实现的，有的不需要关系顺序：background，border，有的是需要关心顺序：font。
1.background:red url(./引入链接) repeat 位置 位置 ;
2.border-边: px 颜色；
3.font：
注：最少要有两个值size，family
顺序：weight style size family 或者
style weight size family 或者
weight style size/line-height family

尽量不要混写，如果非要混合，先复合后单一

19.Css选择器

一.ID选择器：
css：#elem{}
html：id=”elem“
注：1.在一个页面内，ID值是唯一的，不能出现多次
2.命名的规范，由字母，下划线，中划线，字母（并且第一个不是数字）
3.命名方式：
驼峰写法：serachButton（小驼峰式），SearchButton（大驼峰），searchSmallButton
短线写法：search-small-button
下划线写法：search_samll_button
快捷指令： div#命名＋Tab

<style>
#div1{background-color:red}
</style><div id="div1">内容</div>

二.CLASS选择器
.elem{} class=“elem”
注：1.class是可以复用的
2.可以添加多个class样式
3.多个样式的时候，样式的优先级由Css决定而不是class属性中的顺序
4.标签+类的写法
p.box只会选择后面由box的p段落
快捷指令： 例p.命名＋Tab

<style>
.box{backgroune-color:red}
</style><div class="box">内容</dive>

本文标签： HTML和Css的学习

版权声明：本文标题：HTML和Css的学习 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1694374878a251341.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。