526互联

第10.3篇 html基础标签

发布时间 2023-06-29 22:11:55作者: 金刚组

HTML

一、HTML简介

1. 什么是HTML

HTML：HyperText Markup Language，超文本标记语言。
作用：编写网页。

2. 写一个简单的HTML

<html>
    <head>
        <title>page title</title>
    </head>
    <body>
        <font color="red">hello, kitty</font>
    </body>
</html>

3. HTML的语法特点

  • 文件后缀名：.html 或者 .htm

  • 由一堆标签组成的

    • 标签：<关键字>内容</关键字> 或者 <关键字/>自闭合标签
    • 标签可以嵌套

  • 开始标签上可以增加属性：属性对标签的进一步修饰

    • 属性：<关键字 属性名="值" 属性名="值">内容</关键字>

  • 不区分大小写

  • 不需要编译，可以使用浏览器直接打开

4. idea开发HTML

选择的是：static web

二、HTML标签

1. 文字排版标签

1.1 标题标签：<h1>~<h6>

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  • 特点：
    • 默认加粗
    • 内置字号：h1最大，h6最小
    • 独占一行

1.2 横线标签：<hr/>

<hr color="颜色" size="粗细" width="长短" align="水平位置"/>

常用属性：
        color：颜色，red，blue，green
        size：粗细，50px
        width：长短，500px
        align：水平位置，left， center, right

1.3 段落标签：<p>，换行标签：<br/>

<p>
    一个p标签是一个段落；
	如果要多个段落，就写多个p标签。
	换行<br/>这些内容另起一行换行显示
</p>
<p>
    一个p标签是一个段落；
	如果要多个段落，就写多个p标签
</p>
  • 特点：
    • 段落之间有空白间隔
    • 换行后行之间没有空白间隔

1.4 文字标签：<font>

粗体字：<b>，斜体字：<i>

<font size="字号" color="颜色" face="字体">黑马程序员</font>
<b>粗体字</b>
<i>斜体字</i>
  • 属性：
    • size：字号，1~7. 最小是1， 最大是7， 默认是3
    • face：字体，电脑上有的字体，才会按设置显示字体

2. 图片标签

2.1 图片标签：

<img src="图片路径" width="显示宽度" height="显示高度" title="鼠标悬浮提示" alt="图片加载不出来时，显示的提示"/>

<img src="../img/mm.jpg" width="500px" title="沙滩美女" alt="这是个妹纸"/>
  • 属性：
    • src：图片路径，必须属性。其它属性都是非必须的
    • width：宽度
    • height：高度。 通常只写width或者只写height，图片会等比例缩放显示；如果都写，图片可能会变形

3. 清单标签和超链接标签

3.1 清单标签

<!-- 1. 无序清单：ul+li -->
<ul type="清单项前边的符号类型">
    <li>小龙虾</li>
    <li>麻婆豆腐</li>
    <li>北京烤鸭</li>
</ul>

<!-- 2. 有序清单：ol+li -->
<ol type="清单项前边的序号类型">
    <li>可乐</li>
    <li>雪碧</li>
    <li>橙汁</li>
</ol>

  • ul：无序清单本身，支持的属性：

    • type：每个清单项前边的符号类型，常用值有：
      • disc：小圆点，默认值
      • circle：小圆圈
      • square：小方块

  • ol：有序清单本身，支持的属性：

    • type：每个清单项前边的序号类型，常用值有：
      • 1：阿拉伯数字序号
      • a/A：英文字母序号
      • i/I：罗马数字序号

3.2 超链接标签<a>

<a href="http://www.baidu.com" target="_self">百度</a>
<a href="_01清单标签.html" target="_blank">清单页面</a>
  • 属性：
    • href：跳转到哪个页面，写路径
    • target：新页面面哪显示，常用值有：
      • _self：在当前窗口显示（会覆盖掉原页面），默认
      • _blank：在新窗口显示（原页面保留）

4. 表格标签

4.1 创建表格

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
            <th>表头单元格3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格1-1</td>
            <td>单元格1-2</td>
            <td>单元格1-3</td>
        </tr>
        <tr>
            <td>单元格2-1</td>
            <td>单元格2-2</td>
            <td>单元格2-3</td>
        </tr>
    </tbody>
</table>
  • table标签：表格本身，常用属性：
    • border：边框线。1表示有边框线
    • width：表格的宽度
    • cellspacing：单元格之间的间隔
    • bgcolor：背景颜色
    • align：表格的水平位置
  • tr标签：表格里的行
    • bgcolor：行的背景颜色
    • align：行里内容的水平位置
    • height：行高
  • td标签：行里的单元格
    • bgcolor：单元格的背景颜色
    • align：单元格里内容的水平位置
  • caption标签：表格的标题，写在table标签里
  • th标签：行里的表头单元格，是一种特殊的td，自带样式：加粗并居中
  • thead、tbody、tfoot：没有实际作用，仅仅是划分的标签

4.2 合并单元格

4.2.1 步骤：

  1. 确定用什么属性：跨行用rowspan，跨列用colspan
  2. 确定属性值是几：要合并几个单元格，值就是几
  3. 确定属性加在哪：加在要合并的单元格，最前边的那个单元格上
  4. 删除被合并掉的单元格
<table border="1" width="500px" align="center" cellspacing="0" bgcolor="yellow">
    <tr>
        <td colspan="2">1-1</td>
        <td>1-3</td>
        <td rowspan="2">1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td colspan="2" rowspan="2">3-2</td>
        <td>3-4</td>
    </tr>
    <tr>
        <td>4-1</td>
        <td>4-4</td>
    </tr>
</table>

5. 其它标签head

5.1 文档声明

<!DOCTYPE html>

声明给浏览器看的，声明的是当前网页使用的是哪个版本的HTML编写的。要写在html的最前边

5.2 head标签

<head>
    <!--charset：当前页面的字符集-->
    <meta charset="UTF-8">
    <!--网页标题-->
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <!--description：搜索引擎搜索到的结果里，显示的网站描述-->
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
    <!--Keywords：搜索引擎搜索的关键字-->
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
    <!--icon：网页标题前边的图标-->
    <link rel="icon" href="http://www.jd.com/favicon.ico" mce_href="http://www.jd.com/favicon.ico" type="image/x-icon" />
</head>

三、其它

1. 颜色的写法

  • 颜色的名称：red, blue, green, yellow, ...

  • 十六进制的色码：# + 6位十六进制的数字，比如：#FFFFFF

    • 前2位：红色的值；中间2位：绿色的值；后边2位：蓝色的值；
    • 如果红、绿、蓝值一样，是黑~白
    • 如果6位数字一样，可以简写。比如：#666666可以简写成：#666

2. 尺寸的写法

  • 固定像素值：500px
  • 百分比写法：50%
    • 百分比，是根据父容器计算的百分比。而不是直接根据页面计算的

3. 路径的写法

  • 绝对路径：

  • 相对路径 ：

    • 以./开头的路径：从当前目录里找。比如：./mm.jpg，当前目录里的mm.jpg文件
    • ./可以省略不写
    • 以../开头的路径：从上级目录里找。比如：../img/mm.jpg，上级目录里找img，从img里的mm.jpg

4. 特殊字符的写法

  • 如果有一些符号，是html语法里使用的，比如：<，可能会出现语法错误。
  • 使用实体字符替换特殊字符：
    • < ： <
    • > : >
    • & : &