html

最新推荐文章于 2022-07-13 15:01:59 发布

Loco_Python.

最新推荐文章于 2022-07-13 15:01:59 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

文章标签： HTML

本文链接：https://blog.youkuaiyun.com/qq_45166384/article/details/99699001

目标

HTML：了解什么是HTML，为什么要使用HTML
标签：知道常用标签及其属性分别代表什么，会使用常用标签

一、HTML

1.1 HTML概念

HTML (HyperText Mark-up Language)，指的是超文本标记语言。

所谓超文本，有两层含义:

因为网页中还可以图片、视频、音频等内容(超越文本限制)
它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)

标记：就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1> 等。

注意点：

标签不区分大小写，但是推荐使用小写。
根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
2.2 单标签是一个标签组成，没有标签内容，比如: img标签

资源路径：

相对路径：从当前操作的 html 文档所在目录算起的路径（一般使用相对路径）
绝对路径：从根目录算起的路径

1.2 HTML基本结构

<!DOCTYPE html>
<html>
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页内容
    </body>
</html>

第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
<html>...</html>标签是开发人员在告诉浏览器，整个网页是从<html>这里开始的，到<html>结束,也就是html文档的开始和结束标签。
<head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
<body>...</body>标签是编写网页上显示的内容。

二、资源路径

2.1 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

2.2 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

注意：

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

三、常用标签

3.1 双标签

<h1> - <h6>标签：

-

标签可定义标题，

定义最大的标题，

定义最小的标题。

<h1>h1标题</h1>

<div>标签：定义HTML文档中的一个分隔区块或者一个区域部分

<div>这是一个div标签</div>

<p>标签：段落标签

<p>这个一个段落标签</p>

3.2单标签

**<br> **:换行标签

<img>: 图片标签

<hr>: 分隔符 (水平线) 标签

3.3 带属性的标签

<img>: 图片标签

<img src="images/pic.jpg" alt="图片">

<a>: 超链接标签

<a href="http://www.baidu.com">百度网</a>

3.4 表单标签

表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器。

表单相关标签的使用

<form>标签表示表单标签，定义整体的表单区域
- action属性: 设置表单数据提交地址
- method属性: 设置表单提交的方式，一般有“GET”方式和“POST”方式, 不区分大小写
<label>标签表示表单元素的文字标注标签，定义文字标注
<input>标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式
- type属性
  - type=“text” 定义单行文本输入框
  - type=“password” 定义密码输入框
  - type=“radio” 定义单选框
  - type=“checkbox” 定义复选框
  - type=“file” 定义上传文件
  - type=“submit” 定义提交按钮
  - type=“reset” 定义重置按钮
  - type=“button” 定义一个普通按钮
- name属性: 设置表单元素的名称，该名称是提交数据时的参数名
- value属性: 设置表单元素的值，该值是提交数据时参数名所对应的值
<textarea>标签表示表单元素的多行文本输入框标签定义多行文本输入框
<select>标签表示表单元素的下拉列表标签定义下拉列表
- <option>标签与<select>标签配合，定义下拉列表中的选项

 <form action="https://www.baidu.com" method="GET">
     <label>姓名：</label><input type="text" name="username" value="11" />
     <label>密码：</label><input type="password" name="password" />

     <label>性别：</label>
     <input type="radio" name="gender" value="0" /> 男
     <input type="radio" name="gender" value="1" /> 女

     <label>爱好：</label>
     <input type="checkbox" name="like" value="sing" /> 唱歌
     <input type="checkbox" name="like" value="run" /> 跑步
     <input type="checkbox" name="like" value="swiming" /> 游泳

     <label>照片：</label>
     <input type="file" name="person_pic">

     <label>个人描述：</label>
     <textarea name="about"></textarea>

     <label>籍贯：</label>
     <select name="site">
         <option value="0">北京</option>
         <option value="1">上海</option>
         <option value="2">广州</option>
         <option value="3">深圳</option>
     </select>

     <input type="submit" name="" value="提交">
     <input type="reset" name="" value="重置">
</form>