admin管理员组文章数量:1655673
拨云见雾
文章目录
- 拨云见雾
-
-
- 一、什么是HTML,CSS?
- 二、宇宙第一编辑器VS Code
-
- 2.1下载
- 2.2VS Code快捷键
- 三、Chrome浏览器
- 四、深入了解网站开发
- 五、Web三大核心技术
- 六、HTML基础结构与属性
-
- 6.1 结构
- 6.2标签的属性
- 七、HTML初始代码
-
- 7.1如何快速创建html初始代码?
- 7.2初始代码
- 八、HTML中的注释
-
- 8.1 写法
- 8.2快捷键
- 8.3意义
- 九、 HTML语义化
-
- 9.1好处
- 十、标题及段落
- 十一、文本修饰标签
-
- 11.1 标签
- 十二、图片标签与图片属性
- 十三、引入文件的地址路径
- 十四、链接跳转
- 十五、跳转锚点
- 十六、特殊符号
- 十七、列表标签
-
- 17.1无序列表
- 17.2有序列表
- 17.3定义列表
- 十八、嵌套列表
- 十九、表格标签
- 二十、表格属性
- 二十一、表单标签
- 二十二、表格表单组合实例
- 二十三、div和span
- 二十四、CSS基本语法
- 二十五、内联样式和内部样式
- 二十六、外部样式及两种写法
- 二十七、 CSS中颜色表示法
- 二十八、CSS背景样式
-
- 28.1样式
- 二十九、背景实现视觉差效果
- 三十、CSS 边框样式
-
- 30.1边框样式
- 30.2边框实现三角形
- 三十一、CSS文字样式
-
- 31.1字体样式
- 31.2字体大小
- 三十二、CSS段落样式
-
- 32.1样式
- 32.2文本与段落的综合练习
- 三十三、CSS复合样式
- 三十三、CSS选择器
-
- 33.1ID选择器
- 33.2class选择器
- 33.3标签选择器(TAG选择器)
- 33.4群组选择器(分组选择器)
- 33.5通配选择器
- 33.6层次选择器
- 33.7 属性选择器
- 33.8伪类选择器
- 33.9结构性选择器
- 三十四、CSS样式的继承
- 三十五、CSS优先级
- 三十六、css盒子模型
-
- 36.2CSS盒子模型的问题
- 三十七、标签的分类
-
- 37.1按类型
- 37.2按内容
- 37.3 按显示
- 37.4显示框类型
- 三十八、标签的嵌套规范
- 三十九、溢出隐藏
- 四十、透明度与手势
- 四十一、最大、最小宽高
- 四十二、css默认样式
- 四十三、float浮动
- 四十四、CSC位置
- 四十五、CSS精灵
- 四十六、css圆角
- 四十七、pc端的布局
-
一、什么是HTML,CSS?
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。HTML
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS
它们是两种编程语言,一般情况下需要配合使用,是作为网站开发的初始语言。一个网站是由多个网页组成的每一个网页都是一个.html文件。
二、宇宙第一编辑器VS Code
2.1下载
- Visual Studio Code VS Code来自微软,是一个开源的,基于Electron的轻量代码编辑器。
2.2VS Code快捷键
-
ctrl +a:全选
-
shift + end :从头选中一行
-
shift + home :从尾部选中一行
-
shift + alt + ⬇️:快速复制一行
-
tab:向后缩进
-
tab + shift : 向前缩进
-
ctrl + c :复制
-
ctrl + s :保存
-
ctrl + x :剪切
-
ctrl+v:粘贴
-
ctrl + z:撤销
-
ctrl + y : 前进
-
shift + ⬆️或⬇️ :快速移动一行
-
alt + 鼠标左键 :多光标
-
ctrl + d :选择相同元素的下一个
-
设置:文件->首选项->设置(大小、是否换行 word wrap)
三、Chrome浏览器
-
下载地址goole chrome
-
百度统计所占份额百度
-
市场常见五大浏览器:IE浏览器(Internet explorer)、火狐浏览器(Firefox)、谷歌浏览器 (Chrome)、 苹果浏览器 (Safari)、欧朋浏览器 (Opera)
四、深入了解网站开发
-
UI设计师:设计稿
-
Web前端开发工程师(H5开发):
-
设计稿->代码 数据库里的数据->显示到页面
-
Web后端开发设计师 :负责后台储存数据
五、Web三大核心技术
-
HTML:结构
-
CSS:样式
-
JavaScript :行为
六、HTML基础结构与属性
超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用,是网页制作必备的编程语言。
6.1 结构
- 超文本:文本内容+非文本内容(图片、视频、音频等)
- 语言 :编程语言
- 标记 :格式:<单词> 标记又叫标签
分类:单标签<header>
- 双标签
<header></header>
- 创建标签的快捷键 :单词+ tab键-> <单词>
- 标签可以上下排列,也可以组合嵌套。
6.2标签的属性
- 来修饰标签的,设置当前标签的一些功能。
- <标签 属性=‘‘值’’&emsp属性2=“值2”>
- HTML常见标签:
七、HTML初始代码
每一个html文件都需要添加初始代码,初始代码就是无论你写什么样的网页,这些代码都是要有的,这就是初始代码。
7.1如何快速创建html初始代码?
! + tab键
7.2初始代码
<!DOCTYPE html> 文档声明:告诉浏览器这是一个html文件
<html lang="en">html 文件的最外层标签:包裹着所有html标签代码,lang="en"表示是一个英文网站,lang="zh-CN"表示是一个中文网站
<head>
<meta charest="UTF-8"> 元信息:是编写网页中的一些辅助信息,"UTF-8"国际编码,让网页不出现乱码的情况
<title>Document</title> 设置网页的标题
</head>
<body>
显示网页内容的区域
</body>
</html>
八、HTML中的注释
8.1 写法
<!--注释的内容--> 在浏览器中看不到注释的内容,只能在代码中看到注释的内容。
8.2快捷键
- 快速删除注释:shift + alt + a
- 快速添加注释:ctrl + /
8.3意义
- 1.把暂时不用的代码注释起来,方便以后使用。
- 2.对开发人员进行提示。
九、 HTML语义化
所谓HTML语义化指的是,根据网页中内容的结构,选择适合自己的HTML标签进行编写。
9.1好处
-
1.在没有CSS的情况下,页面也能呈现出很好的内容结构.
-
2.有利于SEO,让搜索引擎爬虫更好的理解网页。
-
3.方便其他设备解析(如屏幕阅读器、盲人阅读器等)。
-
4.便于团队开发和维护。
十、标题及段落
- h标签,p标签
- 标题 双标签
<h1></h1>
-------<h6></h6>
从上至下逐级递减在一个网页中h1标题最重要,并且一个.html文件中只能出现一次h1标签,h5,h6标签在网页中不经常使用 - 段落 双标签
<p></P>
十一、文本修饰标签
11.1 标签
-
强调 ->双标签 :
<strong></strong> <em></em>
-
区别:1.写法和展示效果是有区别的,strong是对文本加粗,em是对文本斜体
-
2.strong的强调性更强,em强调性更弱
-
下标:
<sub></sub>
-
上标:
<sup></sup>
-
删除文本:
<del></del>
-
插入文本:
<ins></ins>
-
注:一般情况下,删除文本都是和插入文本配合使用。
十二、图片标签与图片属性
- img -> 单标签
<img>
- src :引入图片的地址。
- alt :当图片出现问题的时候,可以显示一段友好的提示文字。
- title :提示信息
- width 、height :显示图片的大小(可要可不要,加上使空间固定,使段落之间位置不会变化,更美观)
十三、引入文件的地址路径
- 1.相对路径 :. 路径中表示当前路径
- . .在路径中表示上一级路径
- 例:
<img scr="../"被设置链接的图片的地址"alt="">
注:初学者推荐使用相对路径更容易移植代码,找到相关文件 - 2.绝对路径:能够找到文件所在的位置
例:<img scr="E:/"被设置链接的图片的地址"alt="">
- 注:网络地址只能写斜线/不能写反斜线\。
十四、链接跳转
<a>
标签:双标签<a></a>
- herf属性:链接的地址
- target属性:可以改变链接打开的方式,默认情况下:在当前页面打开 _self 新窗口打开:_black
<base>
标签:单标签 作用:改变链接的默认行为 写在<head>
当中
十五、跳转锚点
-
在页内进行跳转
-
实现一: #号
id属性 -
实现二: #号
name属性
注:name属性加给的是a标签
十六、特殊符号
编写一些文本时经常会遇到无法输入的字符,如®(注册商标)、©(版权符) 等,还有往一段文字中加入多个空格时,页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符,在HTML中,为这些特殊字符准备了专门的代码。
- 格式:& + 字符
- 作用:解决冲突(左右尖括号添加多个空格的实现)
十七、列表标签
17.1无序列表
<ul>、<li>
:列表的最外层容器、列表项- 注:ul和li必须是组合出现的,要符合嵌套规范,它们中间不允许添加其他标签
- type属性:改变前面标记的样式(一般都是用CSS去控制)
17.2有序列表
<ol>、<li>
:列表的最外层容器、列表项- 注:有序列表用的非常少,经常用的是无序列表,无序列表可以去代替有序列表
- type属性:改变前面标记样式(一般都是用CSS去控制)
17.3定义列表
<dl>
: 定义列表<dt>
:专业术语或名词<dd>
:对名词进行解释,描述
十八、嵌套列表
- 列表之间可以相互嵌套,形成多层级的列表
<ul>
<li>
辽宁省
<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>
河南省
<ul>
<li>郑州</li>
<li>开封</li>
<li>洛阳</li>
</ul>
</li>
</ul>
十九、表格标签
- :表格的最外层容器
- :定义表格行
- :定义表头
- :定义表格单元
- :定义表格标题
- 语义化标签:tHead、tBody、tFood
- 注:在一个table中,tBody是可以出现多次的,但tHead、tFoot只能出现一次
<table>
<caption>天气预报</caption>
<thead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</thead>
<tr>
<td>2022年10月22日</td>
<td>天气晴朗,适合出行</td>
</tr>
<tr>
<td>2022年10月23日</td>
<td>阴,不适合出行</td>
</tr>
</table>
二十、表格属性
- border:表格边框
- cellpadding:单元格内的空间
- cellspacing:单元格之间的空间
- rowspan:合并行
- colspan:合并列
- align:左右对齐方式(left center right)
- valign:上下对齐方式 (top middle bottom)
二十一、表单标签
- 1.表单input标签
<form>:表单的最外层容器
<input>:标签用于搜集用户信息,根据不同的type属性值,展示不同的控件,如:输入框、密码框、复选框等(单标签)
- 2.表单相关标签
<textarea>:多行文本框
<select><option>:下拉菜单
<label>:辅助表单
<form action="http://www.baidu"><!-- 提交数据到百度上去 -->
<h2>输入框:</h2>
<input type="text">
<h2>密码框:</h2>
<input type="password">
<h2>复选框</h2>
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">葡萄
<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>
二十二、表格表单组合实例
- 表格表单之间可以相互组合形成数据展示效果
- 注意要符合嵌套规则
<form action="">
<table border="1" cellpadding="30">
<tbody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码:</td>
<td><input type="password" placeholder="请输入密码"</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tbody>
</table>
</form>
二十三、div和span
- div(块):
- span (内联) :用来修饰文字的,
<div>
<h2><a href="#">扬州 千锋教育官网<span style="color: greenyellow">html</span>-学员们信赖的IT培训机构入口</a></h2>
<a href="#"><img src="https://ms.bdimg/pacific/0/pic/-2043055832_-580489177.jpg?x=0&y=0&h=150&w=242&vh=150.00&vw=242.00&oh=150.00&ow=242.00" alt=""></a>
<p><千锋教育官网 产研学相结合的14大IT课程助推新基建技术驱动新动能千锋教育官网 千锋教育整合互联网核心技术,坚持全程面授的教学模式></p>
<a href="#">http://www.mobiletrain/page/it/?nanjing=mopinpaibdtg=pinpaipc=1808163666&jzl_kwd=140505814404&jzl_ctv=51717774389&jzl_mtt=1&jzl_adt=cl1&jzl_ch=11&jzl_act=2770118&jzl_cpg=113048638&jzl_adp=254823117&jzl_sty=50&jzl_dv=1</a>
</div>
二十四、CSS基本语法
- 格式:选择器{属性1:值1;属性2: 值2}
- 单位:px -> 像素(pixel)、 % -> 百分比
- 基本样式 :weidth(宽)、background-color(背景色)、height(高)、
- CSS注释:
/*CSS注释的内容*/
<style>
div{
width: 25%;height: 100px;background-color: aquamarine;}
span{
background-color: blue;}
</style>
<div>这是一个块</div>
<div>又是一个块</div>
<span>这是一个内联</span>
二十五、内联样式和内部样式
- 内联(行内行间)样式:在HTML标签上加上style属性来实现的
- 内部样式:在
<style>
标签内添加的样式 - 注:内部样式的优点,可以复用代码。
- 区别:内部代码可以复用,符合w3c的规范标准,尽量让结构和样式分开处理。
<style>
div{
width: 100px;height: 100px;background-color: red;}
</style>
<div style="width: 100px;height: 100px;background-color: brown ;">这是一个块</div>
<div style="width: 100px;height: 100px;background-color:cornflowerblue "></div>
<div>这是一个块</div>
<div>另外一个块</div>
二十六、外部样式及两种写法
外部样式:引入一个单独的CSS文件,name.css
通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性资源的地址,通过@imput方式引入外部样式(这种方式有很多内容不建议使用)
<!--<link rel="styleness" href="./common.css">-->
<title>Document</title>
<style>
@import url('./common.css');
</style>
<body>
<div>这是一个块</div>
</body>
二十七、 CSS中颜色表示法
- 1.单词表示法:red、blue、green、yellow
- 2.十六进制表示法:#000000(表示最小值,黑色)、#ffffff(表示最大值,表示白色)
- 3.rgb三原色表示法:取值范围0~255
rgb(255,255,255); - 4.获取颜色的工具:获取颜色的下载地址添加链接描述
photoshop工具
二十八、CSS背景样式
28.1样式
- background-color 背景色
- background-image 背景图
url背景地址)
默认:会水平垂直都铺满背景图 - background-repeat 平铺方式
- repeat-x x轴平铺
- repeat-y y轴平铺
- repeat(x,y都进行平铺,默认值)
- no-repeat 都不平铺
- background-position :背景位置
x y :number(px、%)| 单词
x : left、center、right
y :top、center、bottom - background- attachment :背景图随滚动条移动的方式
- 1)scroll :默认值(背景位置是按照当前元素进行偏移的)
- 2)fixed (背景位置是按照浏览器进行偏移的)
二十九、背景实现视觉差效果
<style>
body{
height:2000px}
div{
width:300px ;height: 300px;background-color:red ;background-image: url(.img/tree.jfif);background-repeat: repeat-x;background-position: 100px 50px;}
</style>
<body>
<div></div>
</body>
三十、CSS 边框样式
30.1边框样式
- border-style :边框样式
solid:实线,dashed:虚线,dotted:点线 - border-width :边框大小 px …
- border-color : 边框颜色 red #f00 …
- 边框也可以针对某一边框进行单独设置:border-left-style 中间是方向 left ,right,top,bottom
<style>
/* div{ height: 300px;width: 300px;border-style: solid;background-color: aqua;border-width: 1px;} */
/* div{ height: 300px;width: 300px;border-style: dashed;background-color: aqua;border-width: 30px;}*/
div{
width: 300px;height: 300px;border-style: dotted;border-right-width: 10px;
border-right-color: green;border-top-style: solid;border-top-width: 10px;border-top-color: red;}
</style>
<body>
<div></div>
</body>
30.2边框实现三角形
<style>
div{
width: 0px;height: 0px ;
border-top-color: white;
border-top-style: solid;
border-top-width: 30px;
border-right-color: red;
border-right-style: solid;
border-right-width: 30px;
border-bottom-color: white;
border-bottom-style: solid;
border-bottom-width: 30px;
border-left-color: white;
border-left-style: solid;
border-left-width: 30px;}
</style>
<body>
<div></div>
</body>
- 颜色:透明色 transparent
<style>
body{
background-color: green;}
div{
width: 0px;height: 0px ;
border-top-color: transparent;
border-top-style: solid;
border-top-width: 30px;
border-right-color: red;
border-right-style: solid;
border-right-width: 30px;
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 30px;
border-left-color: transparent;
border-left-style: solid;
border-left-width: 30px;}
</style>
<body>
<div></div>
</body>
三十一、CSS文字样式
31.1字体样式
- 1.font-family:字体样式
英文字体 :Arial、‘Times New Roman’
中文字体 :微软雅黑、宋体 - 2.中文字体的英文名称
微软雅黑:‘Microsoft YaHei’
宋体:SimSun - 衬线体与非衬线体
注意点:1.多个字体类型的设置目的(使设置的字体类型能适应更多的设备)
2.引号的添加目的(有的字体中间有空格用引号表示它们是一个整体)
<style>
div{
font-family: Arial;}
div{
font-family: Georgia, 'Times New Roman', Times, serif;}
</style>
<body>
<div>这是一段文字</div>
<p>这是一段文字</p>
<div>this is a text</div>
<p>this is a text</p>
</body>
31.2字体大小
-1. font-size:字体大小
默认大小:16px
写法:number(px) |单词(small、large…不推荐使用)
- 2.font-weight:字体粗细
模式:正常(normal)加粗( bold)
写法:单词(normal,bold)| number(100、200······900,100—500都是正常的,600—900都是加粗的) - 3.font- style:字体样式
模式:正常(normal) 斜体(italic)
写法:单词(normal、italic)
注:oblique也是表示斜体,用的比较少,一般了解即可。
区别:1.italic 带有倾斜属性字体的才可以设置倾斜操作。
2.oblique 没有倾斜属性的姿态也可以设置倾斜操作。 - 4.font-color:字体颜色
三十二、CSS段落样式
32.1样式
- 1.text-decoration :文本装饰
下划线:underline
删除线:line-through
上划线:overline
不添加任何修饰:none
注:添加多个文本修饰:line-through underline overline - 2.text-transform:文本大小写(针对英文段落)
小写:lowercase
大写:upcase
注针对首字母大写:capitalze
<style>
p{
width: 300px; text-decoration: underline overline; }
p{
width: 300px; text-transform: lowercase;}
</style>
<body>
<p>Visual Studio 2022 for Mac 完全融入了 macOS 体验, 整个 IDE 均使用原生控件,具有全新的深色模式和原生 macOS 辅助功能工具。</p>
<p>jdhjnddgigfwjneufjnvjkjbnlblnbjbjbkjkhffufbjvkjvjbhjsk</p>
</body>
-
3.text-ident:文本缩进
首行缩进
em单位:相对单位,lem永远都是字体大小相同 -
4.text- align:文本对齐方式
对齐方式(left、right、center、justify(两端对齐)) -
5.line- height:定义行高
什么是行高,一行文字的高度,上边距和下边距的等价关系。
默认行高:不是固定值,而是变化的,根据当前字体的大小不再不断的变化
取值:1.number(px) | scale(比例值,跟文字大小)
-
6.letter-spacing:字之间的间距
-
7.word- spacing:词之间的间距(针对英文段落)
-
8.对于英文和数学不能自动折行问题:
1.word-break :break-all ;(非常强烈的折行)
2.word-wrap :break-word ;(不是非常强烈的折行 会产生一些空白区域)
<style>
/* p{ width: 300px; text-decoration: underline overline; }*/
/* p{ width: 300px; text-transform: lowercase;}*/
/* p{ text-align: justify;}*/
/*p{ text-align: 30px;}*/
/* p{ line-height: 40px;}*/
div{
width: 300px;height: 300px;border: 1px solid red ;word-break: break-all;}
```html
</style>
<body>
<p>Visual Studio 2022 for Mac 完全融入了 macOS 体验, 整个 IDE 均使用原生控件,具有全新的深色模式和原生 macOS 辅助功能工具。当我听说她被捕时,我感到很惊讶,因为我认为她是那种害怕自己影子的胆小鬼。</p>
<p>jdhjnddgigfwjneufjnvjkjbnlblnbjbjbkjkhffufbjvkjvjbhjsk</p>
</body>
<div>
Visual Studio 2022 for Mac 完全融入了 macOS 体验, 整个 IDE 均使用原生控件,具有全新的深色模式和原生 macOS 辅助功能工具。当我听说她被捕时,我感到很惊讶,因为我认为她是那种害怕自己影子的胆小鬼。
jdhjnddgigfwjneufjnvjkjbnlblnbjbjbkjkhffufbjvkjv
</div>
32.2文本与段落的综合练习
<style>
div{
width: 800px;}
h1{
text-align: center;color: #ff6600;}
h2{
color: #00a0ff;}
#p1{
font-style: italic; font-weight: bold;}
#p2{
color: #66ff00 ;line-height: 30px;text-indent
版权声明:本文标题:Web前端从入门到入土 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729707242a1210862.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论