Web前端开发--HTML
HTML快速入门
1.新建文本文件，后缀名改为.html
2.编写 HTML结构标签
3.在
中填写内容HTML结构标签
特点
1.HTML标签中不区分大小写
2.HTML标签属性值中可以使用单引号也可使用双引号
3.HTML语法结构比较松散（但在编写时要严格一点）
VS Code安装使用
Visual Studio Code（别名 VS Code）是微软在2015年4月推出的代码编辑工具
VS Code 对Web开发项目提供了卓越的支持；此外还支持其他编程语言如C++、Java、Python、PHP和Go等。
VS Code 提供了非常强大的插件库，大大提高了开发效率。
官网：https://code.visualstudio.com
基础标签&样式
新浪新闻-标题
标题排版
图片标签:
src:指定图像的url(绝对路径/相对路径)
width:图像的宽度(像素/相对于父元素的百分比)
height:图像的高度(像素 /相对于父元素的百分比)
标题标签:
-
水平线标签:
水平线标签:
宽度和高度一般只设置一个
整体效果：
编写完要注意用Ctrl+S保存！
小结：
标题样式
CSS引入方式:
1.行内样式:写在标签的style属性中(不推荐)
嵌入样式：将其放置于style标签内部。(通常建议将其放置于head标签内部)
3.外联样式:写在一个单独的.css文件中(需要通过 link 标签在网页中引入)
该CSS样式应用在当前页面上是有效的，并且包括所有当前页面的h1标签都会显示相应的颜色。
用link标签来引用css文件
下面是方式三中定义的css文件：
css选择器：
这里使用的是类选择器：
id选择器：
标签没有意义
选择器优先级 ：id选择器>类选择器>元素选择器
font-size：设置字体大小
、
1. 标签
●是一个在开发网页时大量会用到的没有语义的布局标签
●特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开
2.CSS选择器
●元素选择器:标签名{… }
●id选择器:#id属性值{… }
●类选择器: .class属性值{…}
●优先级:id选择器 >类选择器 >元素选择器
3.CSS属性
●color:设置文本的颜色
●font-size:字体大小(注意:记得加px)
超链接
央视网 是中国中央电视台官方提供的官方网站入口。
该标签用于嵌入式网站链接访问，
其中：
- 部分用于指定要访问的具体网络 URLs；
- target 属性决定了打开资源链接时的跳转目标；
- _self 标签表示默认值，在当前页面打开对应链接；
- _blank 标签则用于在空白页面打开指定链接，
以提高用户体验的安全性。
CSS属性
text-decoration:规定添加到文本的修饰，none表示定义标准的文本
color:定义文本的颜色
新浪新闻-正文
正文排版
视频标签:
音频标签:
段落标签:
文本加粗标签: /
1.相关音频/视频文件 >
2.段落分隔由
控制；段落标记为
3.通过实现文字加粗>>（注意<strong应保留在代码中）>>
4.CSS样式如下：>>
- 设置垂直方向上的行间距
- 定义第一个字符的缩进量
- 规定水平对齐选项
5.注意：>>
在HTML中无论输入多少个空格只会显示一个可以使用空格占位符
页面布局
每个组件：将页面的所有部分视为一个包裹盒。
所有组件被包裹在一个矩形区域内。
内容区域能容纳主要的信息。
填充空间用于内部装饰。
边界区划分不同的功能模块。
边缘区则用于额外的空间安排。
●布局相关知识 :实际开发网页中会广泛应用div和span这两个无语义布局标签
●标签 :
●特点 :
**** ●div标签:
●一行独占一行显示
●宽度默认由父元素决定
●高度随内容自动调节
●支持设置宽度和高度参数
●HTML标记:
●一行可容纳多个 HTML 标签
●宽度与高度默认随内容扩展
●不可自行设定宽度与高度参数
