寒假Web前端学习-HTML基础一

博主寒假自学web前端的笔记,写这个也是想看看自己的学习进度,顺便督促以下自己。

有一说一,中国大学MOOC是真的好用,感兴趣的都可以去看看,好的大学没有围墙

Web前端

一.HTML基础
<!DOCTYPE html>    /-命令 文档类型:符合HTML5标准/
<html lang="en">   /lang 属性:搜索引擎 en 英文zh 中文
<head>
<meta charset="UTF-8">  //<meta>:元数据/
<title>Title</title>    charset 属性:字符集编码方式
</head>           浏览器:UTF-8 国际编码。所有语言占用空间小
<body>                          GB2312 简体中文

</body>
</html>
在这里插入代码片

《HTML标签》

*标题h1~h6
<h1>标题内容</h1>h1> 一个页面建议只有一个h1
例
<h1>一级标题 heading</h1>
<h2>二级标题 heading</h2>
<h6>六级标题 heading</h6>
在这里插入代码片

效果图
在这里插入图片描述

*段落p
<p>段落内容</p>

例:
<p>这是段落,每个段落自动换行。</p>
<p>这是段落,每个段落自动换行。</p>
<p>段落内部文字忽略连续 空格,
也不会显示空行,且不会换行</p>
在这里插入代码片

效果图
在这里插入图片描述


*段内换行 br
</br> 单独出现的标签,直接结束

例:
<p>这是一个段落。<br/>注意规范的写法/保留。</p>
在这里插入代码片

效果图
在这里插入图片描述

*空格符&nbsp;

例:
<body>
<p>段落内部文字忽略连续的&nbsp;&nbsp;&nbsp;空格。
<br/>也不会显示空行,且不会换行
</p>
</body>
在这里插入代码片

效果图
在这里插入图片描述



*预留格式pre
定义预留格式化的文本
文本中的空格和换行符会被保留

例 <body>
<h2>《咏桂》</h2>
<p>
<pre>
暗淡轻黄体性柔,
情疏迹远只香留。
何须浅碧深红色,
自是花中第一流。
</pre>
</p>
<h2>《咏桂》</h2>
<p>

暗淡轻黄体性柔,
情疏迹远只香留。
何须浅碧深红色,
自是花中第一流。

</p>
</body>
在这里插入代码片

效果图
在这里插入图片描述



*行内组合span 组合行内元素,以便通过CSS样式来格式化
例
<body>
<p>
<span>中国人口最新报告</span>
</p>
<style type="text/css">
span{
color:blue;
font-weight: bold;

}
</style>
在这里插入代码片

效果图
在这里插入图片描述



*水平线<hr/>
例:
<p>正文段落</p>
<hr/>
<p>正文段落</p>

*注释<!--注释内容-->
注释不会在浏览器中显示,但注释可以跨行。


发布了10 篇原创文章 · 获赞 0 · 访问量 330

猜你喜欢

转载自blog.csdn.net/want_to_fly_/article/details/103947097