html学习之htm文件结构和标签

今天是开通博客的第一天,也是正式学习html的第一天。web前端工程师学习计划正在进行中,希望我能坚持。

一、html文件的结构

一个HTML文件是有自己固定的结构的。

<html>
    <head>...</head>
    <body>...</body>
</html>

二、 认识标签1

1.<html></html>称为根标签,所有的网页标签都在<html></html>中。

2.<head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。

文档的头部描述了文档的各种属性和信息,包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

3. 在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。

(1).<p>文章的段落标签

(2).<hx>文章的标题标签(网页上的各个栏目的标题也可使用它们)

标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法:
           <hx>标题文本</hx> (x为1-6)

(3).<strong> 或<em>强调一段话中的关键字时使用,它们的语义是强调。

(4).<span>标签是没有语义的,它的作用就是为了设置单独的样式用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
   color:blue; 
}
</style>
</head>
<body>
    <p>我的第一个段落<span>span test</span></p>
</body>
</html>

(5).<q>短文本引用

<q>标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。

(6).<blockquote>标签,长文本引用

浏览器对<blockquote>标签的解析是缩进样式。

(7)<br />标签分行显示文本

xhtml1.0写法:
<br />
html4.01写法:
<br>
注意,现在一般使用 xhtml1.0 的版本的写法(其它标签也是),这种版本比较规范。

在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br />。

8.&nbsp为网页中添加空格

9.<hr>标签,添加水平横线

<hr />标签的在浏览器中的默认样式线条比较粗,颜色为灰色,若是不喜欢可以用css样式表对其修改。

10.<address>标签,为网页加入地址信息

地址信息可以为:电子邮件地址、签名或者文档的作者身份。

在浏览器上显示的样式为斜体

11.<code>标签,加入一行代码

注意:在文章中一般如果要插入多行代码时不能使用<code>标签了。
语法:
<code>代码语言</code>
注:如果是多行代码,可以使用<pre>标签。

12.<pre>标签,给网页加入大段代码

<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

注意:<pre> 标签不只是为显示计算机的源代码时用的,在你需要在网页中预显示格式时都可以使用它,只是<pre>标签的一个常见应用就是用来展示计算机的源代码。

13.<ul>标签,添加新闻信息列表(没有前后顺序的信息列表)

举例:
<ul>
  <li>精彩少年</li>
  <li>美丽突然出现</li>
  <li>触动心灵的旋律</li>
</ul>
ul-li在网页中显示的默认样式一般为:每项li前都自带一个圆点

14.ol ,添加图书销售排行榜
语法:
<ol>
    <li>信息</li>
    <li>信息</li>
   ......
</ol>
<ol>在网页中显示的默认样式一般为:每项<li>前都自带一个序号,序号默认从1开始
15.<div>标签,为网页划分独立的版块
类似一个容器,用于排版
给网页的独立的版块添加“标记”: 语法:<div  id="版块名称">…</div>
16.table标签,网页中的表格
创建表格的四个元素:table、tbody、tr、th、td
、<table>…</table>:整个表格以<table>标记开始、</table>标记结束。
、<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
、<tr>…</tr>:表格的一行,所以有几对tr 表格就有几行。
、<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
、<th>…</th>:表格的头部的一个单元格,表格表头。
、表格中列的个数,取决于一行中数据单元格的个数。

、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
、表头,也就是th标签中的文本默认为粗体并且居中显示

17.caption标签,为表格添加标题和摘要

.摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,

还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
    语法:<table summary="表格简介文本">

.标题:用以描述表格内容,标题的显示位置:表格上方。
      语法:<caption>标题文本</caption>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值