寒假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>

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


  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值