HTML+CSS基础课程学习
HTML简介
HTML是网页内容的载体,内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字图片视频等。
与之相关的还有CSS(表现)以及(JavaScript)这些在后续会进行学习。
认识HTML标签
首先一个网页由最基本的标签构成,形如<>,标签一般都是成对出现的,分为开始和结束两种标签,结束标签比开始标签多一个/,并且标签不区别大小写!
每一个html文件都有如下固定的结构:
<html> 根标签,所有网页标签都在<html>和</html>内
<head>.....</head> 头部标签,用于定义文档头部
<body>.....</body> “身体”,<body>和</body>内为网页的主要内容
</html>
认识head标签,以下标签可用于head部分(具体用法后续更新)
<head>
<title>.....</title> 网页的标题信息
<meta> 网页的元信息
<link> 链接外部样式文件
<style>.....</style> 定义HTML文档的样式信息
<script>.....</script> 定义客户端脚本
</head>
代码注释标签,类似于编程中的//,具体代码形如:
<!--注释文字-->
认识body标签,存放网页内容
若显示文章,则需要显示文章标题与内容,则需要运用到<hx><p>
标签,用法如下:
<hx>标题文本</hx>(x为1-6)
其中<h1>等级最高,其余的依据重要性递减
h1-h6的默认样式如下:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落文本</p>
注意!一个段落需要一个`<p>`标签!有几个段落就是几个`<p>`标签!
此时网页内容已有,若要在一段话中特别强调某几个文字,就可以用<em>或者<strong>
其中<em>默认为斜体,而<strong>默认为粗体
,或者用<span>,<span>
用于设置单独的样式,比如把某几个字的颜色改变(这不意味着强调某几个字,而只是把它设为和别的文字不同样式而已)代码如下:
<html>
<head>
<style>
span{
color:blue}
</style>
</head>
<body>
<p><em>我在学习HTML语言</em></p>
<p><strong>我在CSDN上写博客</strong></p>
<p><span>我喜欢HTML语言</span></p>
</body>
</html>
对段落进行处理时,段落文字内也许会有引用某位作家或者某人的话(短文本!),此时我们需要<q>
进行引用,用法:<q>引用短文本</q>
然后文中被引用的那句话便加上了“”(此标签最主要的目的不是为了加引号!而是为了标注那句话非原创!)
如果遇到长文本需要进行引用,依旧用<q>
会很麻烦,这种情况下我们改用<blockquote>引用长文本</blockquote>
,浏览器对此标签的解析为缩进样式。
对于诗句而言,为了让它更美观,我们希望一行一句诗,所以轮到标签<br />
出场啦!这是少有的不用成对出现的标签,相当于word文档里的回车(但是html内是自动忽略空格与回车的)。
所以呢,当我们要输入空格时就要用
需要几个空格就输入几个
代码展示如下:
<html>
<head>
</head>
<body>
<p>
<blockquote>
一剪梅 李清照<br />
红藕香残玉簟秋。<br />
轻解罗裳,独上兰舟。<br />
云中谁寄锦书来,雁字回时,月满西楼。<br />
花自飘零水自流。<br />
一种相思,两处闲愁<br />
此情无计可消除,才下眉头,却上心头。<br />
</blockquote>
</p>
</body>
</html>
网页中我们常常看到分割线(如本博客标题下方),添加这么一条水平线只需添加<hr />
,和<br />
一样,<hr />
也可以单独使用。
若要标注类似于地址信息的信息,比如电子邮件地址,网址,作者……则用<address>地址信息</address>
,浏览器显示默认为斜体。
若要显示代码信息,<code>代码语句</code>
是个很好的选择!
要如上文展示大段代码则选择<pre>大段代码</pre>
。
更多功能请期待后续更新博文!