html

2021-07-24 本文已影响0人不学无数YD

二、 HTML语法介绍

1. HTML介绍

超文本标记语言（HyperText Markup Language）浏览器能够识别和解析的语言，通过标签的形式构建页面结构和填充内容

2. 标签

标签也称为标记或元素，用于在网页中标记内容

语法：标签使用< >为标志，标签名不区分大小写，推荐小写表示
分类：
- 双标签：成对出现，包含开始标签和结束标签。例：
```
<html>

</html>
```
- 单标签：只有开始标签，没有结束标签，可以手动添加“/”表示闭合。例：
```
<br>
<br/>
```
标签属性：
- 标签属性书写在开始标签中，使用空格与标签名隔开，用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成，属性值使用双引号表示。例：
```
<meta charset="utf-8">
```
- 同一个标签中可以添加若干组标签属性，使用空格间隔。例：
```
<img src="lily.jpg" width="200px" height="200px">
```

3. 使用

创建网页文件，使用.html或.htm作为文件后缀

添加网页的基本结构

<!doctype html>
<html>
    <head>
        <title>网页标题</title>
        <meta charset="utf-8">
    </head>
    <body>
         网页主体内容
    </body>
</html>

标签嵌套
在双标签中书写其他标签，称为标签嵌套
- 嵌套结构中，外层元素称为父元素，内层元素称为子元素；
- 多层嵌套结构中，所有外层元素统称为祖先元素，内层元素统称为后代元素
- 平级结构互为兄弟元素
HTML语法规范
- 标签名不区分大小写，建议使用小写
- 注释语法：
```

```

三、常用标签介绍

1. 基本结构解析

<!-- 文档类型声明，便于浏览器正确解析标签及渲染样式 -->
<!doctype html> 
<!-- HTML文档开始的标志 -->
<html> 
  <!-- 头部设置，可在head中设置网页标题，网页选项卡图标，引入外部的资源文件，设置网页相关信息等 -->
  <head>
      <!-- 设置网页标题，显示在网页选项卡上方 -->
      <title>网页标题</title>
      <!-- 设置网页字符编码 -->
      <meta charset="utf-8"> 
  </head>
  <!-- 网页主体部分，显示网页主要内容 -->
  <body> 
      网页主体内容
  </body>
</html><!-- 文档结束-->

2. body中常用标签

文本标签

标题标签：自带加粗效果，从h1到h6字体大小逐级递减

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

段落标签：

<p>段落文本</p>

普通文本标签：

<span>行分区标签，用于对特殊文本特殊处理</span>
<b>加粗标签</b>
<strong>强调标签，效果同b标签</strong>
<label>普通文本标签，常与表单控件结合实现文本与控件的绑定</label>
<i>斜体标签</i>
<u>下划线标签</u>

格式标签：
浏览器会忽略代码中的换行和空格，只显示为一个空格。想要实现页面中的换行，需要借助于换行标签。

<br>

水平线标签，在页面中插入一条水平分割线

<hr>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>
    HTML&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Day02&gt;
  </h1>

  <b>加粗</b>
  <i>倾斜</i>
  <u>下划线</u>
  <del>删除</del>
  
  <hr>

  <h1>
    这是一个包含 <br>
    <span style="color: red">特殊内容</span> <br>
    的大标题
  </h1>
</body>
</html>

image.png

字符实体：
某些情况下，浏览器会将一些特殊字符按照HTML的方式解析，影响显示结果。此时需要将这类字符转换为其他的形式书写
例：

 使用 &lt; 在页面中呈现 "<"
 使用 &gt; 在页面中呈现 ">"
 使用 &nbsp; 在页面中呈现一个空格
 使用 &copy; 在页面中呈现版权符号"©"
 使用 &yen; 在页面中呈现人民币符号"￥"

容器标签
常用于页面结构划分，结合CSS实现网页布局

<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

练习：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>容器标签</title>
</head>
<body>
  <div id="header">头部内容
    <div>左侧新闻</div>
    <div>右侧登录</div>
  </div>
  <div id="main">主体内容
    <div>logo</div>
    <div>搜索框</div>
    <div>百度热搜</div>
  </div>
  <div id="footer">底部内容</div>
</body>
</html>

图片与超链接标签
- 图片标签 <img src="">：用于在网页中插入一张图片。
  1. 属性 src 用于给出图片的URL，必填。
  2. 属性 width/height 用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
  3. 属性 title 用于设置图片标题，鼠标悬停在图片上时显示
  4. 属性 alt 用于设置图片加载失败后的提示文本
  语法：
```
<img src="" width="" height="" title="" alt="">
```

练习：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>图片和超链接</title>
</head>
<body>
  <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
  <img src="img01.jpg" width="200px" height="200px" title="这是我的桌面" alt="图片走丢了">

  <a href="https://news.baidu.com/" target="_blank">新闻</a>
  <a href="demo.html">demo.html</a>
</body>
</html>

image.png

超链接标签：用户可以点击超链接实现跳转至其他页面
1. 属性 href 用于设置目标文件的URL，必填。
2. 属性 target用于设置目标文件的打开方式，默认在当前窗口打开。可以设置新建窗口打开目标文本(取"_blank")
```
<a href="http://www.taobao.com" target="_self">淘宝</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
```

3. 常用结构标签

列表标签
- 有序列表（ordered list）
  默认使用阿拉伯数字标识每条数据
```
<ol>
   <li>list item 列表项</li> 
   <li>list item 列表项</li>
   <li>list item 列表项</li>
</ol>
```
- 无序列表（unordered list）
  默认使用实心圆点标识列表项
```
<ul>
   <li>list item 列表项</li> 
   <li>list item 列表项</li>
   <li>list item 列表项</li>
 </ul>
```
- 列表嵌套
  在已有列表中嵌套添加另一个列表，常见于下拉菜单

 <ol>
     <li>
         西游记
         <ul>
             <li>孙悟空</li>
             <li>孙悟空</li>
             <li>孙悟空</li>
         </ul>
     </li>
 </ol>

练习：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>列表标签</title>
</head>

<body>
  <!-- ol>li*3 -->
  <ol>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ol>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</body>

</html>

表格标签

表格由行和单元格组成，常用于直接的数据展示或辅助排版,基本结构如下

 <!-- 创建表格标签 -->
 <table>
      <!-- 创建行标签 -->
     <tr>
         <!-- 行中创建单元格以显示数据 -->
         <td>姓名</td>
         <td>年龄</td>
         <td>班级</td>
     </tr>
     <tr>
         <td>迪丽热巴</td>
         <td>20</td>
         <td>002</td>
     </tr>
 </table>

单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整
```
| 单元格属性 | 作用           | 取值       |
| ---------- | -------------- | ---------- |
| colspan    | 跨列合并单元格 | 无单位数值 |
| rowspan    | 跨行合并单元格 | 无单位数值 |
```
- 行分组标签：可以将表格中的若干行划分为一组，表示表头，表尾及表格主体，默认在表格中创建的所有行都会被自动加入表格主体中
```
<table border="1px" width="300px" height="300px">
    <thead></thead>
    <tfoot></tfoot>
    <tbody></tbody>
</table>
```
- 表单标签
  表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。
  - 表单使用<form></form>
    | 属性名 | 取值 |
    | ------- | ------------------------------------------------------------ |
    | action | 设置数据的提交地址 |
    | method | 设置数据的提交方式，默认为get方式，可以设置为post |
    | enctype | 设置数据的编码类型，涉及二进制数据提交（例如图片，文件，音视频等），必须设置数据的提交方式为post,编码类型为"multipart/form-data" |
    例如：

    <form action="" method="" enctype="">
        <!--此处为表单控件-->
    </form>

表单控件使用（重点）
表单控件用于采集用户信息，可设置以下标签属性

属性名	取值
type	设置控件类型
name	设置控件名称，最终与值一并发送给服务器
value	设置控件的值
placeholder	设置输入框中的提示文本
maxlength	设置输入框中可输入的最大字符数
checked	设置单选按钮或复选按钮的默认选中
selected	设置下拉菜单的默认选中

表单控件用于采集用户信息，常用控件如下：

  <input type="text">  文本框
  <input type="password">  密码框
  <input type="radio">  单选按钮
  <input type="checkbox">  复选框
  <input type="file">  文件上传
  <input type="button"> 普通按钮
  <input type="submit">  提交按钮
  <select></select>  下拉菜单
  <textarea></textarea> 文本域

练习：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>表格</title>
</head>
<body>
  <!-- table>tr*4>td*3 -->
  <table border="1px" cellspacing="0">
    <tr>
      <!-- colspan  跨列  从左向右横向合并单元格 -->
      <!-- 删除当前行被合并的单元格 -->
      <td colspan="3">11</td>
      <!-- <td>12</td>
      <td>13</td> -->
    </tr>
    <tr>
      <td>21</td>
      <!-- rowspan 跨行 从上向下纵向合并单元格 -->
      <!-- 删除后面行 对应位置的单元格 -->
      <td rowspan="3">22</td>
      <td>23</td>
    </tr>
    <tr>
      <td>31</td>
      <!-- <td>32</td> -->
      <td>33</td>
    </tr>
    <tr>
      <td>41</td>
      <!-- <td>42</td> -->
      <td>43</td>
    </tr>
  </table>
</body>
</html>

练习：（跳转）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- https://www.baidu.com/s?wd=python -->
  <form action="https://www.baidu.com/s">
    <input type="text" name="wd"> 
    <input type="submit" value="百度一下">
  </form>
</body>
</html>

练习：

image.png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- file:///home/tarena/2103/day03/form.html? -->
  <!-- name属性表示HTML标签的名字  在form表单中  如果标签带有name属性  在数据提交时,会将name属性作为数据的键 和值一同提交给服务器.如果没有name属性 在数据提交时form表单不会提交这个标签的数据 -->
  <!-- 输入框中  用户输入的内容就是这个表单控件的值 -->
  <!-- GET方式提交数据时  将数据按照key=value&key=value&... 拼接在地址栏中发送给服务器 -->
  <!-- 由于get方式提交的数据放在地址栏中  会受到格式限制  长度限制 安全限制 -->
  <!-- ?uname=shibw&upwd=123456 -->
  <!-- ?uname=laowang&upwd=123123 -->

  <!-- https://www.baidu.com/s?wd=python -->
  <form action="" method="" enctype="">
    <label for="uname">姓名: </label>
    <input type="text" id="uname" name="uname" placeholder="请输入姓名" maxlength="10"> <br>
    密码: <input type="password" name="upwd" placeholder="请输入密码"> <br>

    <div>
      性别: <input type="radio"  name="gender" value="0" checked> 男
      <input type="radio" name="gender" value="1"> 女
    </div>

    <div>
      宵夜: <input type="checkbox" name="food"> 烧烤
      <input type="checkbox" name="food"> 小龙虾
      <input type="checkbox" name="food"> 方便面
      <input type="checkbox" name="food" checked> 开水泡馒头
    </div>

    <div>
      住址： <select name="city" id="">
        <option value="0">请选择城市</option>
        <option value="1001">哈尔滨</option>
        <option value="1002">北京</option>
        <option value="2001" selected>恩施</option>
      </select>
    </div>
    <div>
      <input type="file">
    </div>
    <div>
      <textarea name="" id="" ></textarea>
    </div>
    <div>
      <button>保存</button>
      <!-- <input type="submit" value="保存"> -->
      <input type="reset">
      <input type="button" value="普通按钮">
    </div>
  </form>
</body>
</html>

html

二、 HTML语法介绍

1. HTML介绍

2. 标签

3. 使用

三、常用标签介绍

1. 基本结构解析

2. body中常用标签

3. 常用结构标签

猜你喜欢

热点阅读