整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

5.HTML格式标签

.br 强制换行标签

让后面的文字、图片、表格等等,显示在下一行




码海无际<br>码海无际

2.p 换段落标签

在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是



<p>码海无际</p><p>码海无际</p>

3.hr 水平分割线标签

在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,hr 就是创建横跨网页水平线的标签。




码海无际<hr>码海无际

4.div 分区显示标签

分区显示标签,也称之为层标签,常用来编排一大段的HTML段落,也可以用于格式化表,和 p 很相似,是块状元素,经常嵌套使用。







<div>码海无际</div><div>码海无际</div><div>  <div>码海无际</div>  <div>码海无际</div></div>

5.span 行内标签

用来组合文档中的行内元素,没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。



<span>码海无际</span><span>码海无际</span>

6.pre 预格式化标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。





<pre>  码海无际  码海无际</pre>

7.ul 无序列表标签

无序列表的各个列表项之间没有顺序级别之分,是并列的。






<ul>  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ul>

注意:




 1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 2. <li>与</li>之间相当于一个容器,可以容纳所有元素。 3. 无序列表会带有自己样式属性,但是不推荐使用,一般会用CSS设置。

8.ol 有序列表标签

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义

1.格式:





<ol type="符号类型">    <li type="符号类型"></li>    <li type="符号类型"></li></ol>

2.有序列表的type属性值:

  • 1:阿拉伯数字1.2.3等等,默认type属性值
  • A:大小字母A、B、C等等
  • a:小写字母a、b、c等等
  • Ⅰ:大写罗马数字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
  • ⅰ:小写罗马数字ⅰ、ⅱ、ⅲ、ⅳ等等

3.有序列表的value属性值:

  • 指定一个新的序列数字起始值

4.列表可以进行嵌套







































<ol>  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol type="A">  <li>码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li type="A">码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li>码海无际</li>  <li value="6" type="A">码海无际</li>  <li>码海无际</li>  <li>码海无际</li></ol><hr><ol>  <li>码海无际</li>  <li>码海无际</li>  <li>    <ol type="A">      <li>志存高远</li>      <li>志存高远</li>    </ol>  </li>  <li>码海无际</li>  <li>码海无际</li></ol>

9.dl 自定义型列表标签

对列表条目进行简短的说明







<dl>  <dt>软件说明:</dt>  <dd>这是软件说明</dd>  <dt>软件界面:</dt>  <dd>这是软软件界面</dd></dl>

10.center 居中对齐标签

居中对齐


<center>码海无际</center>

TML是谁发明的?

1.HTML的全称是什么?

超文本标记语言(Hyper Text Markup Language),是一种用于创建网页的标准标记语言。

2.谁发明的?

是由Tim Berners-Lee发明的。

HTML 起手应该写什么?

<!DOCTYPE html>
  <!--文档类型为html 此行必须为第一行 前面空一行也会报错-->
  <html lang="en">
    <!--html标签 en是英语 zh-CN是中文-->
    
    <head>
                 <meta charset="UTF-8">
                   <!--文件的字符编码-->
                   <meta name="viewport" content="width=device-width, initial-scale=1.0">
                     <!--content里的内容代表禁止缩放,兼容手机-->
                     <meta http-equiv="X-UA-Compatible" content="ie=edge">
                       <!--content里的内容表示让ie使用最新的内容-->
                       <title>Document</title>
    </head>

常用的表章节的标签有哪些,分别是什么意思?

  1. h1-h6 标题
  2. section 章节
  3. article 文章
  4. p 段落
  5. header 头部
  6. footer 脚部
  7. main 主要内容
  8. aside 旁支内容
  9. div 划分,表示一个区块

全局属性有哪些?

  1. class 用来对网页元素进行分类。如果不同元素的class属性值相同,就表示它们是一类的。
  2. contentteditable HTML 网页的内容默认是用户不能编辑,contenteditable属性允许用户修改内容。
  3. hidden hidden是一个布尔属性,表示当前的网页元素不再跟页面相关,因此浏览器不会渲染这个元素,所以就不会在网页中看到它。
  4. id id属性是元素在网页内的唯一标识符
  5. style 用来指定当前元素的 CSS 样式
  6. tabindex 页通常使用鼠标操作,但是某些情况下,用户可能希望使用键盘,或者只有键盘可以用。因此,浏览器允许使用 Tab 键,遍历网页元素。也就是说,只要不停地按下按钮 Tab 键,网页的焦点就会从一个元素转移到另一个元素,选定焦点元素以后,就可以进行下一步操作,比如按下回车键访问某个链接,或者直接在某个输入框输入文字。
  7. title 用来为元素添加附加说明。大多数浏览器中,鼠标悬浮在元素上面时,会将title属性值作为浮动提示,显示出来。

常用的内容标签有哪些,分别是什么意思?

  1. ol+li 有序列表
  2. ul+li 无序列表
  3. dl+dt+dd 自定义的列表
  4. pre 显示文本中的空白符号
  5. hr 分割线
  6. br 换行
  7. a 链接通过<a>标签表示,用户点击后,浏览器会跳转到指定的网址。
  8. em <em>是一个行内标签,表示强调(emphasize),浏览器会以斜体显示它包含的内容。
  9. strong <strong>是一个行内元素,表示它包含的内容具有很强的重要性,需要引起注意。浏览器会以粗体显示内容。
  10. code 呈现一段计算机的代码,各类语言。
  11. quote 行内的引用
  12. blockquote 块的引用

HTML文件中,有些标签会被经常用到,可能有人觉得太基础,就不认真对待,但是我可以负责任的告诉你,越基础的往往越重要。这次重点学一学标题、段落和链接等基础标签。

为了不重复粘贴HTML代码,咱们来个约定,除了第一次出现完整的HTML文件的页面结构之外,之后只现新增的标签内容,你自己将新的内容,添加到HTML文件中,进行效果验证。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第3个HTML文件</title>
</head>
<body>
<!--这是一个完整的HTML页面结构,常用标签放在这个注释后面即可-->
</body>
</html>

3.1 标题<h1>~

在HTML中,标题从一级到六级,对应标签为<h1>到<h6>,字体逐步变小。属性为align(对齐方式),属性值为left(左对齐,默认)、right(右对齐)和center(居中对齐)。

<h1 align="center">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3>三级标题</h3>
<h4 align="left">四级标题</h4>
<h5 align="right">五级标题</h5>
<h6 align="right">六级标题</h6>

输出结果


3.2 段落<p>

<p> 标签定义段落。浏览器解析到<p>标签时,会自动在其前后创建一些空白。<p>标签的属性也是align。其实为了HTML文件统一布局,很少会用align来指定位置,大多数是用CSS统一指定。

<p>老陈说编程,除了说编程,</p>
<p>还有程序员的爱情与友情,</p>
<p>那是不可能的。</p>

输出结果


3.3 水平线和换行

在网页发的文字多时,好多人习惯性会使用分割线。在HTML,用<hr/>单标签就可以实现分割线。而换行,则用<br/>标签。<hr>标签属性有表示位置的align、高度的的size和宽度width三个属性,其中size和width的单位是像素,但如果用到这些属性的话,推荐用CSS。

<hr size="1"/>
小舅子要结婚了,丈母娘跟我借了10万块钱做彩礼,结果婚事谈崩了。<br/>
今天公司急用钱,我向丈母娘要那10万块钱。<br/>
丈母娘说:借你这10万块钱是干啥用的?<br/>
我说:给小舅子结婚用啊!<br/>
丈母娘说:那婚结成了吗?<br/>
我说:没结成。<br/>
丈母娘大声骂道:婚都没结成你还有脸来要钱!<br/>
突然感觉丈母娘这话说的没什么毛病啊!
<hr size="1"/>

输出结果

3.4 列表<ul>和<ol>

无序列表<ul>标签,可用粗体圆点标记一个项目的列表;有序列表<ol>标签使用数字进行标记,而列表项用<li>标签实现。有关列表的属性,不是被H5抛弃,就是不被推荐,所以......。

<p>
    程序员最喜欢做的三件事
<ul>
    <li>编程</li>
    <li>开发</li>
    <li>敲代码</li>
</ul>
程序员最喜欢的三个美女
<ol>
    <li>潘金莲</li>
    <li>杨贵妃</li>
    <li>杨八妹</li>
</ol>
</p>

输出结果

3.5 超链接<a>

<a>标签定义超链接,用于从一个页面链接到另一个页面。最重要的属性是 href和target, href指定链接的目标(网页地址),target指定打开窗口的模式,_blank:打开新窗口,_parent:在父窗口中打开,_self:默认,当前页面跳转,_top:在当前窗体打开链接,并替换当前的整个窗体。

在没点击链接之前,你先看一下链接内容的字体颜色,点击链接之后,你再看一下,你就会发现,链接内容的颜色会有所变化。

(1) 未被访问的链接带有下划线而且是蓝色的;

(2) 已被访问的链接带有下划线而且是紫色的;

(3) 活动链接带有下划线而且是红色的。

<a href="demo1.html">去到老陈说HTML的第1个Demo中</a>

输出结果


好了,有关html基础标签的内容,老陈讲完了,如果觉得对你有所帮助,希望老铁能转发点赞,让更多的人看到这篇文章。你的转发和点赞,就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙,分享多年的编程经验。想学编程的朋友,可关注:老陈说编程。分享Python,前端(小程序)、App和嵌入式方面的干货。关注我,没错的。

#前端##HTML##程序员##编程##CSS#