H5+CSS（一）

搞前端进到ICU

已于 2023-07-06 10:24:58 修改

阅读量721

点赞数

CC 4.0 BY-SA版权

文章标签：前端 css html 开发语言 html5

于 2022-03-08 15:05:08 首次发布

本文链接：https://blog.csdn.net/qq1677573710/article/details/123353787

本文记录了一名学生从2021年12月28日开始为期4个半月的HTML前端培训过程。内容涵盖HTML5文档结构、基本元素如标题、超链接、图像、段落等，以及W3C标准和前端资源。笔记旨在为小白提供复习材料，同时也适合自学的学生党参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

寄语：我把这四个月的培训通过文字、图片进行描述。想出一个专栏，意识为了自己以后方便复习，二是为了白手起家不想花钱的学生党，毕竟本人也是一个学生。本人从2021年12月28号开始进行为期4个半月的培训。希望对小白有所帮助。这里面我把代码大部分采取截图的方式呈现，想要真正成为一名合格的前端工程师，就一步一个脚印。用手去敲代码。

参考网站：

菜鸟教程（runoob.com）

css3手册（css.doyoe.com）

编译器 VScode

第一周第一天（21-12-28）

老师讲课：

一、html5文档结构

<!DOCTYPE html>

<head>

<body>

网页内容的开始

</body>

</head>

</html>

二、HTML（超文本标记语言），不是编程语言，只是标记语言。

HTML（HyperText Markup Language），三个单词。

三、Web站点创建（相当于本地的文件夹）

web--images(文件夹建立)

images文件夹--jpg\png\bmp\gif\svg

js文件夹----index.js

style文件夹----base.css 、index.css

index.html 、index.htm、default.html、default.htm（首页格式就这四种）

四、html标记60对

1、双标记（标签）

<??>内容<??/>

2、单标记

<??/>html5<??>有没/都对

3、标签与标签之间的关系

并列关系

嵌套关系（注意：标记不能进行交叉出现）

4、标题标记

<h1></h1>标题1--权重最高，一个页面只出现一次

<h2></h2>标题2--权重较高，大标题出现次数最多

<h3></h3>标题3--权重相对较高，副标题的位置

<h4></h4>标题4--权重稍高

<h5></h5>标题5--权重一般，用的几率很少

<h6></h6>标题5--权重一般，用的几率很少

5、html属性

格式：<标记属性=“值” 属性=“值”></标记>

6、强制换行<br>单标记、&nbsp表示占位符

7、小插曲：

32位一个字占4个字节，64位一个字占8个字节

8、个&nbsp,相当于首行缩进2字符。

一个&nbsp就是2个字节。

9、<img src="" alt="提示性文字" title=“提示性文字”width=“200px” heigh="auto">

加alt,当图形加载不出来会有提示性文字，替换文本占位，（seo优化，有好处），

title每个标记都可以有title属性，鼠标放上放上有提示性文字。给图片设置宽高时，往往只设置

一个，防止图片变形。

10、超链接<a></a>

超链接写属性：<a href="" target="_self/_blank"

w3c(World Wide Web Consortium)万维网联盟

w3c标准

10.1超链接分类

10.1.1站内链接。

10.1.2站外链接，有网址存在。

10.1.3邮件链接：

10.1.4锚点链接：

点击的地方<a href="#one">被点击的内容</a>

到达的地方<a id="one">到达的地方</a>

10.2超链接的下载功能：

只能用来下载压缩包。

五、元素分类

块级元素：标题标记<p></p>、<div></div>、<form></form> 、<li></li> 、

<ul></ul>、<address></address>、 <center></center> 、<h1></h1>....、

<hr>、<pre></pre>、<blockquote></blockquote>、

<marquee></marquee>、<ol></ol>、<dl></dl>、<table></table>、

行内元素：<a></a>、<span></span>、<br>、<i></i>、<em></em>、

<strong></strong>、<label></lable>、<sup></sup>、<sub></sub>、

<del></del> 、<u></u> 、<textarea></textarea> 、<select></select>、

设置宽高不生效

行内块元素：<img></img> 、<input></input>

第一天测试：

1、html的结构书写？

2、什么是html,中文名字和英语单词是什么？

3、html注释是什么样子，快捷键是什么？

4、六个标题标记，分别是什么？权重怎么划分，怎么来运用？、

5、超链接的标记是什么？常用属性有哪些？超链接分为哪四种，怎么运用，可以举例说明？

6、图像的标记及属性有哪些？网站优化时，注意对图像增加什么属性？

7、段落标记及属性是什么？强制换行标记是什么？空格符号是什么？

8、w3c指的是什么？

答案：

1、html的结构书写？

<!DOCTYPE html>

<html>

<head>

<body>

</body>

</head>

</html>

2、什么是html,中文名字和英语单词是什么？

html是超文本标记语言，英文单词是：HyperText Markup Langunge

3、html注释是什么样子，快捷键是什么？

html注释是这个样子：

快捷键是：Ctrl+/

4、六个标题标记，分别是什么？权重怎么划分，怎么来运用？、

六个标题标记：

<h1></h1>标题1--权重最高，一个页面只能出现一次

<h2></h2>标题2--权重较高，大标题出现次数最多

<h3></h3>标题3--权重相对较高，副标题的位置

<h4></h4>标题4--权重稍高

<h5></h5>标题5--权重一般，用的几率较小

<h6></h6>标题6--权重一般，用的几率小

5、超链接的标记是什么？常用属性有哪些？超链接分为哪四种，怎么运用，可以举例说明？

超链接的标记是:<a></a>

常用属性有href="路径" ;target="_self/_blank"

超链接分为：锚点链接、站内链接、站外链接、邮件链接

锚点链接：

<a href="#one">我是被点击定位位置</a>

<a id="one">我是到达的位置</a>

站内链接:<a href="链接本地文件的地址">本地文件</a>

站外链接:<a href="www.baidu.com">百度</a>

邮件链接:<a href="mailto:1677573710@qq.com">联系我们</a>

6、图像的标记及属性有哪些？网站优化时，注意对图像增加什么属性？

图像的标记及属性有

网站优化时，注意对图像增加alt属性，当图片加载不出来有提示性文字占位，对于seo优化有好处。

7、段落标记及属性是什么？强制换行标记是什么？空格符号是什么？

段落标记及属性：<p align="" style=""></p>

强制换行标记<br>

空格符号是&nbsp

8、w3c指的是什么？

万维网联盟组织

英文全称（World Wide Web Consortium）