Javaweb之HTML常用标签

最新推荐文章于 2023-05-28 14:20:42 发布

JWei_7

最新推荐文章于 2023-05-28 14:20:42 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： html5 javascript css html 前端

JWei_7

本文链接：https://blog.csdn.net/qq_54729417/article/details/118867614

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html简介

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

语法规则

<!DOCTYPE html>
<html>
  <head>
    <!--设置页面的字符集编码 -->
    <meta charset="utf-8" />
    <!--设置页面的标题 -->
    <title></title>
  </head>
  <body>
    <!--需要展示的信息-->
  </body>
</html>

1.html结构：包括head body
2.html标签是以尖括号包围的关键字
3.html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
4.html通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写,建议小写

HTML的结构：

HTML是一个弱势语言

HTML不区分大小写

HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)

声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
body部分：我们所写的代码必须放在此标签內。

html结构详解

文档声明头

任何一个标准的html页面，第一行一定是一个以<!DOCTYPE… 开头的，这一行就是文档声明头DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种HTML或XHTML规范。

<!DOCTYPE html>

头标签（head部分）

head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>
<title>：指定整个网页的标题，在浏览器最上方显示；
<meta>：提供有关页面的基本信息；
<link>：定义文档与外部资源的关系；
<style>：定义内部样式表与网页的关系；

title

主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断当前网页的主题。如：百度一下，你就知道，效果如下：
在这里插入图片描述

link

这个就是链接外部样式在我的
CSS博客

style

这个如上 css中说了

当你打算结束一行，而又不想开始一个新的段落时，<br >标签就派上用场了。无论你将它置于何处，<br>标签都会产生一个强制的换行。
<br >
注意<br/> 没有结束标签，把<br>标签写为 <br /> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。

4）水平线标签

<hr>
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

5）内容居中标签

<center>
center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。到H5里面，center标签不建议使用。

6）预定义（预格式化）标签

含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）
<pre>
注意：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。

PS：Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。审查元素功能的快捷键是F12。就是打开控制台

三、超链接标签`<a>`

1）外部链接：

链接到外部文件。如下示例：

<a href=“new.html”>点击进入到新网页</a>
或
<a href=“http://www.baidu.com”target=“_blank”>进入百度</a>

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。a是一个文本级的标签。href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。

2）锚链接

指给超链接起一个名字，作用是在本页面或者其他页面的不同位置进行跳转。比如说，在网页底部有一个向上的箭头，点击箭头后回到顶部，这个就是利用到了锚链接。

首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。如下示例

　<h1 id="top" name="top">这是顶部标题</h1>

　　<a href="#top">回到顶部</a>

上述代码中，h1标签元素这个锚叫做top。然后在底部设置超链接a，点击时将回到顶部（此时，网页中的url的末尾也出现了#top），注意href值中的#不要忘记了，表示跳到名为top的特定位置，这是规定。

如果我们将a标签的代码改成<a href="new.html#top">回到顶部</a>,就表示，点击之后，跳转到new.html页面的top锚点中去。

注意：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。

3）邮件链接

代码举例：<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

你们可以点一下嘿嘿嘿
效果：点击之后，会弹出outlook，作用不大。

   前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。

4）特殊的几个链接：

a、返回页面顶部的位置：<a href="#">跳转到顶部</a>

b、与js有关：

(1) javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应，例如：

<a href="javascript:;">内容</a>　
<a href="javascript:void(0);">内容</a>

我们可以这样写来阻止a标签的默认点击行为。
　(2) javascript: 是表示在触发<a>默认动作时，执行一段javascript代码。例如：

　<a href="javascript:alert(1)">内容</a>

5）超链接的属性

href：目标URL；
title：悬停文本；
name：主要用于设置一个锚点的名称；
target：告诉浏览器用什么方式来打开目标页面；target属性有以下几个值：

_self：在同一个网页中显示（默认值）
_blank：在新的窗口中打开
_parent：在父窗口中显示
_top：在顶级窗口中显示
blank就是“空白”的意思，表示新建一个空白窗口。为啥有一个_ ，就是规定，没啥好解释的。

也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。

四、图片标签

img代表的就是一张图片。<img>是自封闭标签，也称为单标签。反正我是喜欢喊单标签的

说到插入图片那就必须提到src 因为这个是图片的路径

src属性

在html页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。
这里涉及到图片的一个属性：src属性：指图片的路径。

在写图片路径时，有两种写法：相对路径、绝对路径

a、相对路径

          相对当前页面所在的路径。两个标记 . 和 .. 分别代表当前目录和父级目录。如下示例：

　　　　<!-- 当前目录中的图片 -->
　　　　<img src="2.jpg">
　　　　<img src="./2.jpg"> 
　　　　<!-- 上一级目录中的图片 -->
　　　　<img src="../2.jpg">

b、绝对路径

(1) 以盘符开始的绝对路径，如下示例：

       <img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">

(2) 网络路径，如下示例：

 <img src="http://www.baidu.com/2016040102.jpg">

总结：

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。

相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

问题：我的网页在C盘，图片却在D盘，能不能插入呢？

答案：用相对路径不能，用绝对路径也不能。

注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。

img标签的常用其他属性

width：宽度
height：高度
title：提示性文本，公有属性，也就是鼠标悬停时出现的文本
align：指图片是水平对齐方式，属性值可以是：left、center、right
alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）

五、列表标签

列表标签分为 有序列表和 无序列表

1.有序列表

      有序列表标签：<ol></ol>
             属性：type：1、A、a、I、i（数字、字母、罗马数字）
             列表项： <li></li>
      示例如下：
        <ol type="1" start="10">有序列表
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ol>

然后还有一个是 start 就是标记第一项从那个开始
在这里插入图片描述

2.无序列表

简答明了就是没有顺序

   无序列表标签： <ul></ul>
             属性：type :三个值，分别为
                  circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
         列表项：<li></li>

   示例如下：  
        <ul type="square">无序列表
            <li>苹果</li>
            <li>香蕉</li>
            <li>橘子</li>
        </ul>

在这里插入图片描述

六、表格标签

表格标签用<table>表示，一个表格<table>是由每行<tr>组成的，每行是由<td>或者<th>组成的，所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。如下表格示例：

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

1）单元格的合并

如果要将两个单元格合并，那肯定就要删掉一个单元格。

横向合并：colspan，例如colspan=”2”   表示当前单元格在水平方向上要占据两个单元格的位置。

纵向合并：rowspan，例如rowspan=”2”   表示当前单元格在垂直方向上占据两个单元格的位置。

<table border="1">
    <tr>
        <th colspan="2">userinfo</th>
    </tr>
    <tr>
        <td >First Name:</td>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <td rowspan="2">Telephone:</td>
        <td>555 77 854</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
</table>

2）表格的标题

<caption>：使用时和<tr>标签并列，如下示例：

<table border="1">
   <caption>Monthly savings</caption>
   <tr>
       <th>Month</th>
       <th>Savings</th>
   </tr>
   <tr>
       <td>January</td>
       <td>$100</td>
   </tr>
</table>

七、表单标签

form表单
表单标签用<form>表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写和选择的。

属性：

1）action：指定表单数据的处理程序，一般是PHP，如：action=”login.php”；

2）method：表单数据的提交方式，一般取值：get（默认）和post（较安全）；

form标签里边的action属性和method属性后面再详细介绍，现在稍微了解一下：action属性就是表示将表单提交到哪里。method属性表示用什么http方法提交，有get、post两种。

<input>：输入标签（文本框）（*****）

用于接收用户输入，例如：<input type=”text” />
属性：

type=“属性值”：

(1) text（默认）：文本类型；
(2) password：密码类型；
(3) radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”）；
(4) checkbox：多选按钮，名字相同的按钮作为一组进行选择；
(5) checked：将单选按钮或多选按钮默认处于选中状态。当标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略；
(6) hidden：隐藏框，在表单中包含不希望用户看见的信息；
(7) button：普通按钮，结合js代码进行使用；
(8) submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去；
(9) reset：重置按钮，清空当前表单的内容，并设置为最初的默认值；
(10) image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片；
(11) file：文件选择框；

提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

name：表单的名称，用于JS来操作或控制表单时使用；
value=”内容”：文本框里的默认内容（已经被填好了的）；
id：表单的名称，用于JS来操作或控制表单时使用；
size=“50”：表示文本框内可以显示五十个字符，一个英文或一个中文都算一个字符；
readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑；
disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写；

最后大家可以去看一下我写的CSS的总结因为基本上都是配套的
CSS