html横线标记_前端 - HTML基础（2）

最新推荐文章于 2024-07-08 14:13:57 发布

weixin_34797871

最新推荐文章于 2024-07-08 14:13:57 发布

阅读量1.4k

点赞数

文章标签： html横线标记

本文链接：https://blog.csdn.net/weixin_34797871/article/details/112290052

版权

本文介绍了HTML中的基本标签用法，包括段落、斜体、粗体、引用、换行、横线、地址标签、表格、表单元素等，强调了这些元素在网页布局和信息展示中的作用，以及如何通过CSS进行样式调整。

摘要由CSDN通过智能技术生成

常见标签

1.段落标签

标签的默认样式，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。
改变CSS样式删除段前段后空白处。

2.斜体标签

 斜体

3.粗体标签

 加粗

4.标签

被用来组合文档中的行内元素。使用来组合行内元素，以便通过样式来格式化它们。

在CSS定义中属于一个行内元素,在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。
本身没有任何属性。
在CSS定义中属于一个块级元素
可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。在页面效果上，使用
会自动换行，使用就会保持同行。
例如：
```
 
```
这样，标签包含的文本就变成了蓝色的字体。

5.标签

作用：段文本引用

例如：
最初知道庄子，是从一首诗庄生晓梦迷蝴蝶。望帝春心托杜鹃。开始的。虽然当时不知道是什么意思，只是觉得诗句挺特别。后来才明白这个典故出自是庄子的《逍遥游》，《逍遥游》代表了庄子思想的最高境界，是对世俗社会的功名利禄及自己的舍弃。
在上面的例子中，“庄生晓梦迷蝴蝶。望帝春心托杜鹃。” 这是一句诗歌，出自晚唐诗人李商隐的《锦瑟》。因为不是作者自己的文字，所以需要使用实现引用。注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。这里用标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了)，而是它的语义：引用别人的话。补充知识：语义化网页结构有助于搜索引擎的收录。同一个效果可以用很多钟方式实现，但这只方便了浏览者，而搜索引擎不知道这里到底是什么内容，这里如果你使用标签，那么就告诉浏览器这里是引用的话。而且在手持设备或移动设备不能很好支持css的基础上，浏览器会使用默认的效果，因而提供较好可读性。
6.
标签
作用：长文本引用

例如：

明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。

注意：浏览器对

标签的解析是缩进样式
7.
标签

怎么可以让每一句诗词后面加入一个折行呢？那就可以用到
标签了，在需要加回车换行的地方加入
，
标签作用相当于word文档中的回车。

语法：

xhtml1.0写法：

html4.01写法：

现在一般使用 xhtml1.0 的版本的写法(其它标签也是)，这种版本比较规范。

与以前我们学过的标签不一样，
标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有
、

和。
讲到这里，你是不是有个疑问，想折行还不好说嘛，就像在 word 文件档或记事本中，在想要折行的前面输入回车不就行了吗？不好意思，在 html 中是忽略回车和空格的，你输入的再多回车和空格也是显示不出来的。

8.

标签
在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。

语法：

html4.01版本

xhtml1.0版本

注意：

标签和
标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
大家注意，现在一般使用 xhtml1.0 的版本(其它标签也是)，这种版本比较规范。

9.标签

一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。

语法：

联系地址信息

如：

文档编写：lilian 北京市西城区德外大街10号

10.标签

在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用标签了，如下面例子：

var i=i+300;

注意：在文章中一般如果要插入多行代码时不能使用标签了。

语法：

代码语言

注：如果是多行代码，可以使用

标签。

11.

标签

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

语法：

语言代码段

如下代码：

var message="欢迎"; for(var i=1;i<=10;i++) { alert(message); }

效果如下：

注意：

标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是

标签的一个常见应用就是用来展示计算机的源代码。

12.

标签

ul-li是没有前后顺序的信息列表。

这样是空心圆，

ul{ list-style:circle; }

这个就是去除前面的点

ul{ list-style:none }

语法：

信息
信息 ......

举例：

精彩少年
美丽突然出现
触动心灵的旋律

ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点

13.

标签

ol-li是有前后顺序的信息列表

语法：

信息信息 ......

举例：

前端开发面试心法零基础学习html JavaScript全攻略

在网页中显示的默认样式一般为：每项
前都自带一个序号，序号默认从1开始。
14.
标签
- 可定义文档中的分区或节(division/section)。
- 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
- 如果用 id 或 class 来标记
  ，那么该标签的作用会变得更加有效。
- 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是
  固有的唯一格式表现。可以通过
  的 class 或 id 应用额外的样式。不必为每一个
  都加上类或 id，虽然这样做也有一定的好处。
- 可以对同一个
  元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是， class 用于元素组(类似的元素，或者可以理解为某一类元素)，而id 用于标识单独的唯一的元素。
  15.
  - 常用属性
  1)属性：border
  
  作用：规定表格边框的宽度
  
  2)属性：cellpadding
  
  作用：单元格中的文本与单元格边框的间距
  
  3)属性：cellspacing
  
  作用：单元格之间的间距
  - 创建表格的四个元素：
  table、tbody、tr、th、td
  
  1、
  ：整个表格以标记结束。
  2、
  …：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
  3、
  …：表格的一行，所以有几对tr 表格就有几行。
  4、
  …：表格的一个单元格，一行中包含几对...，说明一行中就有几列。
  - 常用属性： colspan：规定单元格可横跨的列数，值为数字 rowspan：规定单元格可横跨的行数，值为数字
  
  5、
  …：表格的头部的一个单元格，表格表头。
  6、表格中列的个数，取决于一行中数据单元格的个数。
  
  总结：
  - 1、表头，也就是th标签中的文本默认为粗体并且居中显示
  - 2、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
  - 3、用css样式，为表格加入边框Table 表格在没有添加 css 样式之前，是没有边框的。
  16.
  标签
  表格还是需要添加一些标签进行优化，可以添加标题和摘要。
  - 摘要
  摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。语法：
  - 标题
  用以描述表格内容，标题的显示位置：表格上方。语法：
  标题文本
  … …
  
  17.标签
  - _blank --在新窗口中打开链接
  - _parent --在父窗体中打开链接
  - _self --在当前窗体打开链接,此为默认值
  - _top --在当前窗体打开链接，并替换当前的整个窗体(框架页)
  - 一个对应的框架页的名称 -在对应框架页中打开
  - href：Hypertext Reference的缩写。意思是超文本引用。
  - 使用标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。语法：
```
 链接显示的文本
```
  例如：
```
 click here!
```
  上面例子作用是单击click here!文字，网页链接跳转到http://www.imooc.com这个网页。
  - 标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。如下代码：
```
 click here!
```
  - title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容(语义化更友好)。
  - 注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色(被点击过的文本颜色为紫色)，颜色很难看吧，不过没有关系后面我们学习了css样子就可以设置过来(a{color:#000}),下面会详细讲解。
  - 使用mailto在网页中链接Email地址
  标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。
  
  注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。引号只有一对！
```
例子：
```
  - 如果：A 发送邮件给B1、B2、B3，抄送给C1、C2、C3，密送给D1、D2、D3。
```
那么：1)A知道自己发送邮件给了B1、B2、B3，并且抄送给了C1、C2、C3，密送给了D1、D2、D3。2)B1知道这封是A发送给B1、B2、B3的邮件，并且抄送给了C1、C2、C3，但不知道密送给了D1、D2、D3。3)C1知道这封是A发送给B1、B2、B3的邮件，并且抄送给了C1、C2、C3，但不知道密送给了D1、D2、D3。4)D1知道这封是A发送给B1、B2、B3的邮件，并且抄送给了C1、C2、C3，而且密送给了自己，但不知道密送给了D2、D3。5)邮箱地址 mailto: 发送6)抄送地址cc: 发送7)密件抄送地址用分号分隔: 发送8)多个收件人、抄送人、密送人 ;bcc: 发送9)邮件主题subject: 发送10)邮件内容body: 发送例子：对此影评有何感想，发送邮件给我
```
  18.标签
  
  在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用
  
  标签来插入图片。
  - 语法：
```
 [站外图片上传中……(2)] 
```
  - 讲解：
```
src：标识图像的位置；alt：指定图像的描述性文本，当图像不可见时(下载不成功时)，可看到该属性指定的文本；title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；图像可以是GIF，PNG，JPEG格式的图像文件。路径有两种填写方式：绝对路径、相对路径相对路径：相对于我们当前 html 文件的位置来写路径即可！./表示当前目录，../表示上一级目录
```
  19.
  标签
  注意:
  
  1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在
  标签之间(否则用户输入的信息可提交不到服务器上哦！)。
  2、method:post/get的区别这一部分内容属于后端程序员考虑的问题。
  - 网站怎样与用户进行交互？答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
  语法：
  - 讲解：
  ：标签是成对出现的，以开始，以结束。action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。method ：数据传送的方式(get/post)。用户名: 密码:
  20.标签
  - 当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
  语法：
```
 
```
  - 属性：
```
举例： 
```
  姓名：
  密码： value="xxx" 替换为 placeholder="xxx" 的体验更好一些，placeholder属性为 HTML 5 的新属性。placeholder 属性提供可描述输入字段预期值的提示信息(hint)。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
  语法：
```
注释：placeholder 属性适用于以下的  类型：text, search, url, telephone, email 以及 password。
```
  注意:同一组的单选按钮，name 取值一定要一致，比如上同一个名称“gender”，这样同一组的单选按钮才可以起到单选的作用！
  
  type：
  - 当type="text"时，输入框为文本输入框;
  - 当type="password"时, 输入框为密码输入框。
  - hidden 定义隐藏输入字段
  - image 定义图像作为提交按钮
  - number 定义带有 spinner 控件的数字字段
  - password 定义密码字段。字段中的字符会被遮蔽
  - radio 定义单选按钮
  - checkbox 定义复选框按钮
  - range 定义带有 slider 控件的数字字段
  - reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值
  - search 定义用于搜索的文本字段
  - submit 定义提交按钮。提交按钮向服务器发送数据
  - text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符
  - url 定义用于 URL 的文本字段
  name：为文本框命名，以备后台程序ASP 、PHP使用。
  
  value：为文本输入框设置默认值。(一般起到提示作用)
  
  21.标签
  - 当用户需要在表单中输入大段文字时，需要用到文本输入域。
  语法：
```
 文本
```
  1. 标签是成对出现的，以开始，以结束。
  2. cols ：多行输入域的列数。
  3. rows ：多行输入域的行数。
  4. 在标签之间可以输入默认值。
  举例：
```
 
```
  联系我们在这里输入内容...
  22.标签
  - 使用下拉列表框，节省空间。下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。
  语法：
```
 显示的值 ...   设置selected="selected"属性，则该选项就被默认选中。  selected="selected"
```
  - 若想实现多选
```
 然后选择时候按ctrl点鼠标选中
```
  - 若想让某个选项不可选
  - optgroup 标签
  把相关的选项组合在一起
  
  属性 label：给选项组命名
  
  属性 disabled：禁用该选项组
  
  23.标签
  - label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
  - 语法：
```
 
```
  注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
  - 例子：
```
 
```
  男女输入你的邮箱地址
  24.标签
  
  使用 map 标签可以给图片某块区域加超链接
  
  使用方法：
  
  1)为 map 标签首先加上 id 属性用来为 map 标签定义一个唯一的名称
  
  2)为了保证兼容性再加上 name 属性，属性值与 id 的值相同
  
  3)为 map 标签所作用的图片加上 usemap 属性，属性值为 #id 名称
  
  4)在 map 标签内嵌套 area 标签来实现给指定区域加链接
```
  shape 属性：定义链接区域的形状，常用值 rect、circle coords 属性：确定区域的精确位置。填写坐标即可，以父元素左上角为原点，可借助qq截图来得到想要的坐标 href 属性：填写链接地址即可 alt 属性：给链接加一些说明信息
```
  例子：
```
 
```
  注意：
  1. 第一个coords的四个参数中，前两个参数为矩形的接近原点的顶角的坐标，后两个参数为对角的坐标。
  2. 第二个coords的三个参数中，前两个为圆心坐标，第三个参数为圆的半径。
  25.
  
  创建包含另外一个文档的内联框架(即行内框架)
  
  属性：
  - frameborder
  值：1、0
  
  作用：规定是否显示框架周围的边框。
  - width值：以像素计的宽度值、以包含元素百分比计的宽度值
  作用：定义 iframe 的宽度
  - height
  作用：定义高度
  - name
  作用：给 iframe 命名
  - scrolling
  值：yes、no、auto
  
  作用：规定是否在 iframe 中显示滚动条
  - src
  作用：规定在 iframe 中显示的文档的 URL
  
  可以是本地的 html 文件，也可以是远程的 html 文件
  
  标签写法与嵌套的讨论
  
  标签写法
  - 元素标记的省略(在 html5 里面有的标记是可以省略不写的)
  1)不允许写结束标签的元素
```
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。这些标签都是单标签例如：br 标签，不可以这样
，只能
这样来关闭标签。
```
  2)可以省略结束标记的元素有：
```
 li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。
```
  3)可以省略全部标记的元素有
```
 html,head,body,colgroup,tbody
```
  - 具有 boolean 值得属性
```
 例如：disabled,readonly，checked 等只写属性而不写属性值得时候当做 ture 不写属性表示 false
```
  - 属性值的引号可以省略
```
 要求：属性值不包含 空字符串，，=， ‘
```
  标签嵌套探讨
  
  1.html 规定我们必须要嵌套着写的标签
  
  例如：页面头部是嵌套在 head 标签里面的，主体内容都是嵌套在 body 标签里面的表单的内容是嵌套在 form 标签里面的，dt、dd 是嵌套在 dl 标签里面的，li 是嵌套到ul 标签里面的，等等...
  
  2.块级元素可以嵌套内联元素，但是内联元素不能包含块元素
  我是一个 span 元素
  —— 对
  div 元素
  —— 错
  3.内联元素可以嵌套内联元素
```
  —— 对
```
  4.块级元素与块级元素嵌套注意点
  - div 块级元素是一个容器，几乎可以存放任何常用标签，包括自己，我们为什么要使用 div 来嵌套标签？这个问题可以用用我们国家的省份划分来解释，国家需要划分不同的省份来利于管理，那么我们 html 页面也是的，整个 html 文档元素太多，我们需要使用 div 标签将页面划分成不同的块，这样可以对每块进行分开管理，学完 css 我们就知道怎么进行管理了。
  - 块级元素不能放在 p 标签里面