黑马程序员——Html

最新推荐文章于 2024-01-29 19:41:44 发布

原创最新推荐文章于 2024-01-29 19:41:44 发布 · 589 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #java #黑马程序员

JavaWeb 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML的基本概念和常用标签，包括html概述、书写规范、标签分类、字体设置、超链接的使用、列表标签、图片标签、表格标签、框架标签以及表单标签和输入类型。通过学习，读者可以掌握HTML的基础知识，为网页开发打下基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

——- android培训、java培训、期待与您交流！ ———-

1.1，html概述
1，html:超文本标记（标签）语言。
2，html这门技术主要是用来编写网页的。

1.2，html文件的书写规范
HTML语法规范：
HTML语言主要是用来书写可以在浏览器中显示的数据（文本）。而这些文本需要使用

W3C组织提前定义好的一些标记（标签）。
标签的功能：主要是把页面上要显示的数据封装在标签中，然后通过标签给页面上的数据设置相应的样式。

1.3，html标签（标记）介绍
1，Html中的标签分类：
单标签：
格式：<标签名属性名=”属性值” 属性名=”属性值” 属性名=”属性值” />
双标签：
格式：<标签名属性名=”属性值” 属性名=”属性值” 属性名=”属性值” > 标签中需要封装的
Html中的标签不区分大小写。

2，Html中的注释：解释代码的。
格式：<–注释内容–>与尖括号是连起来使用的。
注释内容不会再浏览器的窗口中显示，但是查看源代码可以查阅到。

1.4，基本的html标签
1，Html标签定义一个html，html的所有内容都在html的标签内
2 如果要显示给用户。内容书写body标签内。
3，标签h1到h6—特殊的字体。 =====新闻网页中。比普通的字体，加粗加黑。
4，p标签定义一段内容。和段落之前，段落的内容有一段空白区
5，再html中浏览器不识别普通的换行。如果想要把内容进行换行。再需要换行的位置，输入br标签换行。
6，hr标签定义一个水平线。

1.5，font字体标签
font是一个双标签。想要修改字体的内，这些内容需要放到font标签内。
注意：size属性：表示的文字的大小。里面的数字只支持1-7 ，如果超过7 大小和7是一样的。
如果想设置更大的字体，可以通过style :书写css代码的。 font-size属性，可以把字体变得更大。
px：单位。html中表示像素。

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>font-字体标签.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <!-- font是一个双标签。想要修改字体的内，这些内容需要放到font标签内。 
         注意：size属性：表示的文字的大小。里面的数字只支持1-7 ，如果超过7 大小和7是一样的。
         如果想设置更大的字体，可以通过style :书写css代码的。 font-size属性，可以把字体变得更大。px：单位。html中表示像素。
    -->
    <font color="red" size="7">黑马</font>
    <font color="red" style="font-size: 1000px">黑马</font>
  </body>
</html>

1.6，特殊字符
这里写图片描述

1.7，超链接
1，超链接：它主要是在当前页面上连接其他的资源（页面）。
写法：<a> 显示的内容 </a>

2，超链接有2个功能：
(1)，连接其他的资源页面—-可以访问其他页面。
(2)，当前页面的定位—–例如回到顶部

3，a标签：链接其他资源需要在a标签上书写href属性，属性的值就是链接的资源的路径（地址）
href属性注意的事项：
如果我们需要书写的地址是其他的网站：这时href中必须以http开始
如果不写协议，默认是文件协议。
如果希望在其他的页面上打开资源：需要在a标签上添加target属性：
_blank 空白页面中打开
_parent 在父页面打开
_self 在当前页面打开，默认
_top 在最外层页面打开
自定义的位置打开

a标签的页面定位：
1、设置锚点（定位的位置）
需要使用name属性或者id属性
2、设置连接，用于跳转
需要使用href属性，属性值需要以#号开始

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>05-超链接-a.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
        <!-- 需要为a标签制定其他页面自由的位置。 
            通过a标签中的
            href 属性：可以定位到某一个页面。
            target属性：告诉浏览器新的页面，在那个位置打开。
            target的属性值被w3c定义好了。
                _blank - 在一个新的未命名的窗口载入文档 ----新打开一个窗口
                _self - 在相同的框架或窗口中载入目标文档  ----在（a标签所在的页面）页面打开。浏览器默认是_self
                _parent - 把文档载入父窗口或包含了超链接引用的框架的框架集 
                _top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架 
        -->
        <a href="http://www.itcast.cn"  target="_blank">百度</a>
        <a href="http://www.google.cn.hk" target="_self" >谷歌</a>
        <!-- 使用a标签的 id属性（通常表示唯一），或者name属性 为a标签定义名字 

            使用另外一个a标签 中href属性。#之前定义好的id或者name属性的值。
        -->
        <a href="#bottom" id="top">去底部</a>
        <a id="mid">中间</a>
        <a href="#top">去顶部</a>
        <a name="bottom">底部</a>
        <a href="#mid" >去中间</a>
  </body>
</html>

2.1，列表标签
1，ol标签定义了一个有序列表，li 子标签（书写在ol内部）—-定义了列表中的项目

2，ul标签定义了无序列表，li标签定义了列表中的项目

3，dl标签定义了一个自定义列表，dt定义了列表中的描述，dd描述相关的子项目

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>06列表标签.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <ol type="A"> <!-- 定义了有序列表 
            type属性，定义了列表的序号
                    A ----表示的大写的英文字母
                    a -----小写英文字母
                    I -----大写的罗马计数
                    i -----小写罗马计数
                    1 -----阿拉伯数字。默认是数字
    -->
        <li>我的订单</li><!-- 定义了列表的项目 -->
        <li>团购订单</li>
    </ol>

    <!-- 通常列表标签可以与超链接一起使用,标签的嵌套 -->
    <ul>    
        <li> <a href="hello.html"> 我的订单</a>    </li>
        <li>京东会员</li>
    </ul>

    <!-- 
音像
    音乐
    影视
    教育音像
     -->
     <dl>
        <dt>音像</dt>
        <dd>音乐</dd>
        <dd>影视</dd>
        <dd> 教育音像</dd>
        <dt>文艺</dt>
        <dd>小说</dd>
        <dd>文学</dd>
     </dl>
  </body>
</html>

2.2，img标签
1，alt:对图片的描述，如果图片的路径有错误，这时描述信息会显示在浏览器中
2，src：图片的位置（绝对路径、相对路径）

3，src属性指定了图片的位置,alt：当图片加载失败的时候显示的信息
通过图片的高度height，宽度width来控制图片的显示大小。
如果按照原图片的等比缩放，书写height 或者 width中的一个。另外一个不要书写内容。
浏览器会自己按照图片的长宽比进行缩放。

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>07img图片.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
    <!-- 
    src属性指定了图片的位置,alt：当图片加载失败的时候显示的信息 
    通过图片的
    高度height
    宽度width
    如果按照原图片的等比缩放
    书写height 或者 width中的一个。另外一个不要书写内容。浏览器会自己按照图片的长宽比进行缩放。
    控制图片的大写
    -->
    <img alt="这是一个美女" height="200px" width="200px" src="img/006.jpg">
    <img alt="这是一个美女" width="200px" src="img/007.jpg">
    <img alt="这是一个美女" width="200px" height="200px" src="img/007.jpg">
  </body>
</html>

2.3，表格标签
1，tml中通过表格格式化显示数据。表格使用行和列组成的。
Table:表格标签：
表格中的行：tr标签
表格中的列（单元格）：td标签
表格中的所有数据全部写在td中。td可以理解成表格中的单元格

2，如果要实现单元格的合并。在td中提供了两个属性
colspan 跨列，属性值：表示的是跨的列数。
rowspan 跨行，属性值：表示的是跨越的行数。
合并的单元格的时候，当确定了要保留的单元格之后，把多余的单元格删除

3，跨列的表格制作：跨列需要使用在制定的单元格td上使用colspan=”列数”
跨行的表格制作：在制定的单元格上td上使用rowspan=”行数”

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>08table表格标签.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
        <!-- table标签的border 属性定义了表格中线条。 bordercolor 表示线条的颜色
            cellpadding  pixels % (百分比)
                规定单元边沿与其内容之间的空白。 
            cellspacing pixels % 
                规定单元格之间的空白。 

            如果表格不设置width属性，那么表格的宽度根据单元格来决定。
            如果设置了width属性。表格的宽度有width的值来制定

         -->
        <table border="1px" bordercolor="blue" width="100%" cellspacing="0px" cellpadding="6px">
            <thead>
                <tr>
                    <th>123</th>
                </tr>
            </thead>
            <tr>
                <td height="111px" align="center">订单信息</td>
                <td>收货人</td>
                <td>订单金额</td>
                <td>下单时间</td>
                <td>状态</td>
                <td>操作</td>
            </tr>
            <tr>
                <td> 订单编号: 249143375 </td>
                <td>张飞</td>
                <td>1000</td>
                <td>215年09月01</td>
                <td>已完成</td>
                <td>查询|删除</td>
            </tr>

            <tr>
                <td>订单编号: 249143376</td>
                <td>刘备</td>
                <td>10000</td>
                <td>215年09月01</td>
                <td>已完成</td>
                <td>查询|删除</td>
            </tr>
        </table>
  </body>
</html>

2.4，框架标签
1，框架标签主要是把页面分成若干个子页面。

2，Frameset标签不能和body一起出现，Frameset标签，去分割页面，通过frameset标签的属性
Cols—把页面分割成几列，Rows—页面分割成几行，页面分割之后需要使用frame标签去引入其它页面。

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>main.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <!-- rows属性的书写方式，需要几行就使用逗号隔开，没一个部分的值，表示的所占有的高度 ，最后一个值可以使用*表示，表示剩余的大写-->
  <!-- 页面被分割几部分，就需要书写几个 frame标签 -->
  <frameset rows="25%,*">
  <!-- frame标签中的src属性，表示的要引入页面路径 -->
    <frame src="head.html"/>
    <!-- 如果子页面仍然需要被分割。则把frameset 替换掉frame标签,通过frameset继续分割 -->
    <frameset cols="25%,*">
        <frame src="left.html">
        <frame src="right.html">
    </frameset>
  </frameset>

</html>

2.5，表单标签以及输入标签
1，表单标签：form
action：属性值是表示form表单中的数据具体需要提交给哪个服务器，书写的是服务器的地址URL
如果action中书写的地址是具体的网络中的地址，必须书写http协议

method：是form表单中数据提交给服务器时使用的提交方式：
提交方式以前有7种，现在常用2种：get和post，如果不写method默认是get方式

input标签中的type属性解释：
type=”text” 普通的文本框，需要用户输入数据
type=”password” 密码框，输入的数据隐藏
type=”radio” 单选按钮，这个是要求用户选择的
type=”checkbox” 多选按钮，也是让用户选择的
type=”submit” 提交按钮，可以把form表单中的所有数据提交到action指定的服务器中
type=”reset” 重置输入的数据到默认状态
type=”button” 一个普通按钮，需要使用后面学习的JavaScript技术给按钮添加对应的功能
type=”hidden” 隐藏form中的数据，在页面上不显示，但可以提交给服务器
type=”file” 主要用在上传图片时让用户选择图片
type=”image” 使用图片作为submit提交按钮的效果
select:下拉框，其中的每个选项需要使用option标签制定
textarea 它给出文本区域，其中的rows=”文本区域的在页面占用的行数” cols=”文本区域的在页面占用的列数”

2，form表单的细节：
1、如果要把form表单中的数据提交给服务器，要求所有form表单中的标签上必须有name属性
2、多个单选按钮（复选按钮）的name属性的值必须一致—并且需要提供默认的value值
3、如果form中的数据是让用户选择的，这时必须书写value属性，手动的制定当前这个标签的数据
4、select下拉框中的数据提交：在select标签上写name属性，在每个option上写value
5、通过form表单的mothd属性设置表单提交数据的方式。Get(默认)，post ,采用post。

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>10form表单--注册.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
  <!-- 
        input 标签 本身没有换行的功能
        如果type =text 表示的普通的文本输入
           type="password"   ==表示的密码输入（隐视输入）
           type="radio"     单选按钮,通过设置name属性可以实现单选，但是name属性的值相同。
           type="checkbos"  复选按钮

           type="button" 定义一个按钮 value属性表示的是按钮的显示内容

           type="submit" 定义了一个表单提交的按钮
           type="reset"  定义了一个重置按钮，表示把表单中的输入信息，恢复默认状态。

           select 定义一个下拉列表 
                option   下拉列表的选项 
         textarea 文本输入，可以多行 rows表示的是行数，cols表示的列数 

         在form的属性。action 定义了表单数据要提交的位置。
         如果想要把标签内输入的信息，提交到服务器，需要在标签内，增加一个name属性。

         表单提交数据方式的说明：
        输入标签中，name属性， value属性--表示的是输入框中的内容。
        表单提交数据的时候，会把每个标签的数据组合中  ； name属性的值=value属性的值 去提交到后天。
        多个标签的内容通过&连接起来

        如果输入框，是让用户选择的。（radio，checkbox select ，需要提供value的值。）

        如果select标签，需要在select标签上定义name的属性
                    在option的标签上，定义value的属性。

        form表单中，通过method属性去定义form表中提交数据方式。 get，post （8种）---默认的方式是get

        get提交的数据，会显示在地址栏中
        post提交的数据。会在请求体中。
   -->
    <!-- url 
        http:// 表示的是http协议
        www.baidu.com ----域名---对应一个ip地址
        :80 表示端口号，如果不输入端口就是80----可以找到服务器上一个软件。
        /xxx/xxx ---具体的资源。
     -->
    <form action="http://188.188.5.250:8080" method="get"><!-- 本身没有输入的功能 -->
        <!-- 定义输入框 -->
        账号：<input type="text" name="username" value="lisi">    <br/>
        邮箱：<input type="text"><br/>
        密码：<input type="password" name="password"><br/>
        性别：<input type="radio" name="sex" value="man">男  
            <input type="radio" name="sex" value="woman">女 
            <input type="radio" name="sex" value="secret"> 保密 <br>
        爱好：<input type="checkbox" name="hobby" value="football"> 足球 <input type="checkbox" name="hobby" value="basketBall">篮球 <input type="checkbox">台球 <input type="checkbox">羽毛球<br>

        生日：<select name="birthday" ><!-- select 定义一个下拉列表 -->
                <option value="1900">1900</option> <!--下拉列表的选项  -->
                <option value="1990">1990</option> <!--下拉列表的选项  -->
                <option value="1991">1991</option> <!--下拉列表的选项  -->
                <option value="1992">1992</option> <!--下拉列表的选项  -->
                <option value="1993">1993</option> <!--下拉列表的选项  -->
            </select>年
            <select>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>月<br>
            <!-- 文本输入，可以多行 rows表示的是行数，cols表示的列数 -->
       简介：<textarea rows="3" cols="30">
         </textarea>
         <br/>
         <input type="button" value="提交"><!-- 此时按钮没有任何功能，如果需要点击按钮去做事情，需要去调用javascript  -->
         <input type="submit" value="注册">
         <input type="reset" >
    </form>
  </body>
</html>

2.6，其他标签
1，html中提供的大部分的标签上都有属性，属性对标签的进一步扩展，可以告诉浏览器以什么的效果

来显示标签的内容。
可以通过这些属性设置标签中封装的数据的在页面上显示的样式效果
在后期出现了新的技术（css），把html标签中用来设置样式的数据从html中进行分离。
Css去告诉浏览器应该怎么样(以什么效果)去显示标签的内容
Html专注于去告诉浏览器应该显示什么内容。

后期书写html文件的时候，html中的所有标签仅仅只是封装页面上要显示的数据，
而把封装数据样式的任务交给了CSS技术。

后期书写html文件的时候：
1、使用html标签只封装页面的数据
2、使用CSS技术设置页面上数据的样式

2，Div和span把数据包起来。通过与css相结合。达到不同效果。通常使用div+css 实现页面的布局。
div和span他们的出现只为了封装页面上的数据，区别：
div标签封装的数据单独占用一行， —-块级标签
span标签封装的数据仅仅占用数据所需的页面区域—行内标签
html的标签可以分成：
块级标签：div table ul ol dl—列表标签 p段落标签
行内标签：span input select textarea

示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!--document 文档type 类型。   告诉浏览器该文件是一个html文件。
    PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" html ===版本是4。01
 -->
<html>
  <head>
    <!-- 标题标签。显示在浏览器的头部 -->
    <title>百度</title>

    <!--  http-equiv 设置的值，表示一个key content里面设置的值，表示value  key=valule -->
    <!-- keywords 关键字 ，给搜索引擎使用的。例如百度。谷歌。搜搜。 -->
    <meta http-equiv="keywords" content="黑马，抗日胜利，70周年，阅兵">
    <!-- description：描述 ,仍然给搜索引擎使用。content是对本页面的一种描述。 -->
    <meta http-equiv="description" content="this is my page">
    <!-- 给浏览器使用。 content-type  设置编码格式。 告诉浏览器本html文件是采用哪种编码的。
        此出设置的值，在工具中，工具会自己转码
    -->
    <meta http-equiv="content-type" content="text/html; charset=gbk">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body>
        这是中文
  </body>
</html>