HTML

2022-06-01 01:13:09

HTML

概念

Hyper Text Markup Language超文本标记语言，是最基础的网页开发语言。
超文本：使用超链接的方式，将不同空间的文字信息组织在一起的网状文本。
标记语言：由标签构成的语言，如果HTML，XML，markdown。标记语言不是编程语言。

语法

html文档后缀名 .html 或者 .htm
标签分为
1. 双标签：有开始标签和结束标签。如 <html> </html>
2. 单标签：如<br>，在HTML中写<br>就行，但在XML里需要写成结束标记<br/>
标签可以嵌套
在开始标签中可以定义属性。属性是由键值对构成（h5定义很多单值的属性），值需要用引号(单双都可)包起来
html的标签不区分大小写，但是建议使用小写

示例代码

<html>
    <head>
        <title>title</title>
    </head>
    
    <body>
        <font color=‘red‘>Hello World</font><br/>
    </body>
</html>

标签分类

文档标签：构成html最基本的标签
- html：html文档的根标签、
- head：头标签，用于指定html文档的一些配置信息，引入外部的资源
- title：标题标签。
- body：体标签

文本标签：和文本有关的标签

<!-- 注释内容 -->
<h1> to <h6>：标题标签，h1~h6:字体大小逐渐递减
<p>：段落标签
<br>：换行标签
<hr>：展示一条水平线
	属性：
    color颜色
    	三种写法：
    	color=‘red‘,用英文单词
    	color=‘rgb(255,25,143)‘,rgb取值0-255
    	color=‘#FF00FF‘，取值00-FF
    width宽度
    	两种写法：
		数值：width=‘20‘,单位是px像素点
    	数值%：width=‘20%‘,是相对于父元素的比例
    size高度
    align对齐方式
    	center居中
    	left左对齐
    	right右对齐
<b>字体加粗
<i>：字体斜体
<font>:字体标签
<center>:文本居中
<pre>预编译标签，在页面上原样显示文本</pre>

多媒体标签

<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500"/>
<!-- 
alt后的文字会在图片加载不出来时显示
title是鼠标悬浮时的提示语
宽度和高度设置一个就行，另一个会按照比例自动适应
src采用相对路径
./代表当前目录
../代表上一级目录
-->
<!--音视频-->
<embed src="hello.mp3"></embed>
<embed src="sun.mp4"></embed>

列表标签
有序列表ol
无序列表ul
链接标签
<a> 标签定义超链接。<a> 元素最重要的属性是 href 属性，它指示链接的目标。href 属性的值可以是任何有效文档的相对或绝对 URL(Uniform Resource Locator,统一资源定位器)。URL后还可以添加参数，会一起传给目标网站。
<a href="https://www.baidu.com?username=zhangsan&password=123">百度</a>
target：指定打开资源的方式。
```

<a href="http://www.itcast.cn" target="_self">点我</a>


<a href="http://www.itcast.cn" target="_blank">点我</a>
```
设置锚点：当一个页面太长，可以设置锚点，通过超链接实现在页面内跳转。
超链接标签可以嵌套图片，实现点击图片跳转的功能。
块级元素和行内元素
<div> 是一个块级元素，至少占一行，上下没有空行。
<p>是段落标记，段前后有空行。
<span>是一个行内元素。
语义化标签：h5为了提高程序的可读性，提供了一些标签
1. <header>页眉
2. <footer>页脚
表格标签：定义表格，相当复杂，建议自己查文档
表单标签：用来向服务器传送数据

表单标签

表单：用于采集用户输入的数据，和服务器进行交互。
form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
属性：

action指定提交数据的URL
method指定提交方式，一共7种，2种比较常用。表单项中的数据要想被提交：必须指定其name属性
- get
  - 请求参数会在地址栏中显示。会封装到请求行中URL?name=value&name=value。
  - 请求参数大小是有限制的。
  - 效率高
- post
  - 请求参数不会再地址栏中显示。会封装在请求体中
  - 请求参数的大小没有限制。
  - 效率低
target用于指定页面的打开方式，_self为默认值，在原窗口打开，_blank在新窗口打开
autocomplete="on"，会记录并提示以前输入的信息，autocomplete="off"，不会记录并提示以前输入的信息。搜索引擎的历史记录功能就是靠这个实现的。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<form action="#" method="get">
    用户名<input name="username"><br/>
    密码<input name="password"><br/>
    <input type="submit" value="登录">

</form>
</body>
</html>

<input>：向服务器发送数据的元素，可以通过type属性值，改变样式

type属性

text：文本输入框，默认值
- placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
password：密码输入框
radio：单选框
1. 要想让多个单选框实现单选的效果，则为其设置相同的name属性
2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
3. checked属性可以指定默认值
checkbox：复选框
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性可以指定默认值
file：文件选择框
按钮（很重要以至于有单独的<button>标签）
1. button：普通按钮，必须结合js才有用
2. submit：提交按钮，用来提交表单
3. image：图片提交按钮，通过src指定图片路径

<label>标签：标签为 input 元素定义标记，鼠标点击可以实现自动跳转。

<label for="username">用户名：<label>
<input type="text" name="username" placeholder="请输入用户名" id="username"><br/>

select：下拉列表
1. 子元素option：指定列表项
textarea：文本域
1. cols：指定列数，每行有多少字
2. rows：指定行数

<button>：此标签定义一个按钮，在标签体内部可以放置文本或图像，这是该元素与input创建的按钮的不同之处。请始终为button标签添加type属性，有三个可选的值：button、reset、submit。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<form action="#" method="get">

    <label for="username"> 用户名 </label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别：<input type="radio" name="gender" value="male" >  男
         <input type="radio" name="gender" value="female" checked>  女
            <br>
    爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
        <input type="checkbox" name="hobby" value="java"  checked> Java
        <input type="checkbox" name="hobby" value="game"> 游戏<br>

    图片：<input type="file" name="file"><br>
    隐藏域：<input type="hidden" name="id" value="aaa"> <br>

    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="birthday"> <br>
    生日：<input type="datetime-local" name="birthday"> <br>
    邮箱：<input type="email" name="email"> <br>
    年龄：<input type="number" name="age"> <br>

    省份：<select name="province">
            <option value="">--请选择--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected>陕西</option>
         </select><br>

    自我描述：
        <textarea cols="20" rows="5" name="des"></textarea>

    <br>
    <input type="submit" value="登录" >
    <input type="button" value="一个按钮" ><br>
    <input type="image" src="img/regbtn.jpg">


</form>

</body>
</html>

注意：表单元素不一定都要放在form标签中。对于要与服务器进行交互的表单元素必须放在form中，如果表单元素不需要与服务器进行交互，就没有必要放在form标签内。

表单提交的时候数据没有发送给服务的三种情况：

表单项没有name属性
单选、多选、下拉列表option都需要添加value属性，才能发送给服务器
表单项不在form标签体中

HTML

码农公寓

HTML

概念

语法

标签分类

表单标签

type属性

相关文章