HTML页面

2023-10-23 09:30:36 浏览数 (1)

HTML页面

HTML5介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾

HTML是一种标记语言，标记语言是一套标记标签。

标签是由尖括号包围的关键字。

标签有两种表现形式：

  1. 双标签，例如：<html></html>
  2. 单标签，例如：<img>

HTML5基本骨架

DOCTYPE是document type (文档类型) 的缩写。

<!DOCTYPE html >是H5的声明位于文档的最前面，处于标签之前。

他是网页必备的组成部分，避免浏览器的怪异模式。

代码语言：javascript复制
<!DOCTYPE html>

定义 HTML 文档，其它元素要包裹在它里面，标签限定了文档的开始点和结束点。

代码语言：javascript复制
<!DOCTYPE html>
<html>
</html>

head标签用于定义文档的头部。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

代码语言：javascript复制
<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

body 元素定义文档的主体。

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

它会直接在页面中显示出来，也就是用户可以直观看到的内容。

代码语言：javascript复制
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        我会显示在浏览器中
    </body>
</html>

标签

title标签
  1. 可定义文档的标题。
  2. 它显示在浏览器窗口的标题栏或状态栏上。
  3. <title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title
  4. <title>的增加有利于SEO优化
代码语言：javascript复制
<!DOCTYPE html>
<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        我会显示在浏览器中
    </body>
</html>
meta标签

meta标签用来描述一个HTML网页文档的属性，关键词等

如：charset="utf-8"是说当前使用的是utf-8编码格式

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>it</title>
    </head>
    <body>
    </body>
</html>
标题

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1>定义最大的标题 <h6>定义最小的标题

代码语言：javascript复制
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在标签中添加属性：align="left | center | right" 默认居左

段落

段落是通过<p>标签定义的

代码语言：javascript复制
<p>这是一个段落 </p> 
<p>这是另一个段落</p>
换行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>

<br /> 元素是一个空的 HTML 元素。

代码语言：javascript复制
<p>这个<br>段落<br>演示了分行的效果</p>
水平线

<hr/>标签在 HTML 页面中创建水平线

代码语言：javascript复制
<hr color="" width="" size="" align=""/>

属性：

  1. color：设置水平线的颜色
  2. width：设置水平线的宽度
  3. size：设置水平线的高度
  4. align：设置水平线的对齐方式（默认居中），可取值left|right
图片

<img> 标签定义 HTML 页面中的图像，<img>是单标签

代码语言：javascript复制
<img src="" alt="" title="" width="" height="">

属性：

  1. src：路径（图片地址与名字）
  2. alt：规定图像的替代文本(图片显示不了时)
  3. width：规定图像的宽度
  4. height：规定图像的高度
  5. title：鼠标悬停在图片上给予提示

图片路径支持：绝对路径，相对路径，网络路径

超链接

HTML使用标签 <a>来设置超文本链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档

代码语言：javascript复制
<a href="url">链接文本</a>

在标签<a> 中使用了href属性来描述链接的地址

默认情况下，链接将以，以下形式出现在浏览器中：

  1. 一个未访问过的链接显示为蓝色字体并带有下划线。
  2. 访问过的链接显示为紫色并带有下划线。
  3. 点击链接时，链接显示为红色并带有下划线。

指定页面上的一个锚点进行滚动：

代码语言：javascript复制
<body>
<a href="#test">跳转锚点</a>
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<div id="test">我是锚点</div>
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
<img src="image.jpeg" width="500">
</body>
常用文本标签

标签

描述

<em>

定义着重文字

<b>

定义粗体文本

<i>

定义斜体字

<strong>

定义加重语气

<del>

定义删除字

<span>

元素没有特定的含义

常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇

有序列表

有序列表是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表是可以进行嵌套的

代码语言：javascript复制
<ol>
    <li></li>
    <li></li>
</ol>

<ol>的属性type 拥有的选项

  1. 1 表示列表项目用数字标号（1,2,3…）
  2. a 表示列表项目用小写字母标号（a,b,c…）
  3. A 表示列表项目用大写字母标号（A,B,C…）
  4. i 表示列表项目用小写罗马数字标号（i,ii,iii…）
  5. I 表示列表项目用大写罗马数字标号（I,II,III…）
无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。

列表是可以进行嵌套的。

代码语言：javascript复制
<ul>
    <li></li>
    <li></li>
</ul>

<ul>的属性type 拥有的选项

  • disc 默认实心圆
  • circle 空心圆
  • square 小方块
  • none 不显示
表格

表格：<table>

行：<tr>

单元格(列)：<td>

表格属性：

  1. border：设置表格的边框
  2. width：设置表格的宽度
  3. height：设置表格的高度

单元格合并属性：

  • 水平合并：colspan
  • 垂直合并：rowspan
代码语言：javascript复制
<table border="1" width="500px" height="200px">
    <tr>
        <td colspan="3">单元格1单元格2单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
    </tr>
    <tr>
        <td rowspan="2">单元格6-11</td>
        <td>单元格7</td>
        <td rowspan="3">单元格81318</td>
        <td colspan="2" rowspan="2">单元格9101415</td>
    </tr>
    <tr>
        <td>单元格12</td>
    </tr>
    <tr>
        <td>单元格16</td>
        <td>单元格17</td>
        <td>单元格19</td>
        <td>单元格20</td>
    </tr>
</table>
Form表单

对于一个输入框，我们一般会将其包括在一个lable标签中，它和span效果一样，但是我们点击前面文字也能快速获取输入框焦点。

代码语言：javascript复制
<body>
<div>登陆我们的网站</div>
<hr>
<div>
    <label>
        账号：
        <input type="text">
    </label>
</div>
<div>
    <label>
        密码：
        <input type="password">
    </label>
</div>
</body>

表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框,按钮等

代码语言：javascript复制
<form action="url" method="get|post" name="myform"></form>

属性说明 action服务器地址 name表单名称 method中Get和Post的区别

  1. 数据提交方式，get把提交的数据url可以看到，post看不到
  2. get一般用于提交少量数据，post用来提交大量数据

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

  1. 表单标签
  2. 表单域
  3. 表单按钮
代码语言：javascript复制
<form>
    <input type="text">
    <input type="submit">
</form>

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

代码语言：javascript复制
<form>
    First name: <input type="text" name="firstname">
    <br>
    Last name: <input type="text" name="lastname">
</form>

密码字段通过标签<input type="password"> 来定义

密码字段字符不会明文显示，而是以星号或圆点替代

代码语言：javascript复制
<form>
    Password: <input type="password" name="pwd">
</form>

用户单击确认按钮时，表单的内容会被传送到另一个文件。

表单的动作属性定义了目的文件的文件名。

由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

代码语言：javascript复制
<form name="input" action="url" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>
框

在页面中添加勾选框：

代码语言：javascript复制
<label>
    <input type="checkbox">
    我同意本网站的隐私政策
</label>

单选框：

代码语言：javascript复制
<label>
    <input type="radio" name="role">
    学生
</label>
<label>
    <input type="radio" name="role">
    教师
</label>

使用name属性进行分组，同一个组内的选项只能选择一个。

下拉列表：

代码语言：javascript复制
<label>
    登陆身份：
    <select>
        <option>学生</option>
        <option>教师</option>
    </select>
</label>

默认选取的是第一个选项，我们可以通过selected属性来决定默认使用的是哪个选项。

html 表单 表格 浏览器 数据

0 人点赞