1). 什么是HTML ?
HTML: HyperText Markup Language,超文本标记语言。
超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
标记语言:由标签构成的语言
HTML标签都是预定义好的。例如:使用
标签展示标题,使用展示超链接,使用展示图片,
HTML代码直接在浏览器中运行,HTML标签由浏览器解析。
下面展示的是一段html代码经过浏览器解析,呈现的效果如右图所示:
2). 什么是CSS ?
CSS: Cascading Style Sheet,层叠样式表,用于控制页面的样式(表现)。
下面展示的是一段 html代码 及 CSS样式 经过浏览器解析,呈现的效果如右图所示:
第一步:创建一个名为HTML的文件夹,然后找到课程资料中的 1.jpg 文件放到该目录下,此时HTML文件夹中内容如下:
第二步:创建一个文本文件,然后修改文件名为hello.html,注意文件的后缀是.html,如下图所示:
第三步:选中文件,鼠标右击,选择使用记事本打开文件,并且编写前端代码
首先html有固定的基本结构
HTML 快速入门
Hello HTML
其中是根标签,
和是子标签,中的字标签而
第四步:然后选中文件,鼠标右击,选择使用浏览器打开文件,浏览器呈现效果如下:
1). HTML页面的基础结构标签
2). HTML中的标签特点
HTML标签不区分大小写
HTML标签的属性值,采用单引号、双引号都可以
HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)
我们通过快速入门案例,发现由记事本文件开发html是非常不方便的,所以接下来我们需要学习一款前端专业的开发工具VS Code。
Visual Studio Code(简称 VS Code )是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持,同时也其他编程语言(例如:C++、Java、Python、PHP、Go等)。VS Code 提供了非常强大的插件库,大大提高了开发效率。
官网: Visual Studio Code - Code Editing. Redefined
详细安装教程:参考 资料/VSCode安装/安装文档/VS Code安装文档.md
注意:需要注意的是,我们作为一名开发者,不应该将软件软装在包含中文名的路径中 。
那我们在讲解HTML的常见基础标签 及 CSS的基本样式时,我们就以 新浪新闻页面 为例,来进行讲解,这样大家不仅能够知道 常见标签及样式的作用,还能够知道具体的应用场景。
新浪新闻的具体页面效果如下:
原始页面网址:焦点访谈:中国底气 新思想夯实大国粮仓_新浪新闻
而对于这个新浪新闻的页面来说,核心内容分为两个部分,如下:
新浪新闻-标题部分
新浪新闻-正文部分
1). 第一部分,是一张图片,需要用到HTML中的图片标签 来实现。
2). 第二部分,是一个标题,需要用到HTML中的标题标签
3). 第三部分,有两条水平分割线,需要用到HTML中的
1). 图片标签 img
A. 图片标签: B. 常见属性: src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径) width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比) height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比) 备注: 一般width 和 height 我们只会指定一个,另外一个会自动的等比例缩放。 C. 路径书写方式: 绝对路径: 1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png 2. 绝对网络路径: https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png 相对路径: ./ : 当前目录 , ./ 可以省略的 ../: 上一级目录
2). 标题标签 h 系列
A. 标题标签:-
111111111111
111111111111
111111111111
111111111111
111111111111
111111111111
B. 效果 : h1为一级标题,字体也是最大的 ; h6为六级标题,字体是最小的。
3). 水平分页线标签
1). 打开VsCode,选择左侧最底部的 "资源管理器",然后选择打开文件夹,选择打开桌面的 HTML 文件夹
2). 将资料中提供的 图片、音频、视频 文件夹的这三个文件夹(里面是图片、音视频素材),复制到 HTML 文件夹中。
3). 在VsCode中创建一个新的 html 文件,文件的后缀名设置为 .html
4). html 文件创建好之后,在其中输入 !,然后直接回车,就可以生成 HTML 的基础结构标签
5). 编写标题排版的核心代码
焦点访谈:中国底气 新思想夯实大国粮仓
新浪政务 > 正文
焦点访谈:中国底气 新思想夯实大国粮仓
2023年03月02日 21:50 央视网