HTML

HTML

概念

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

语法

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

  • 示例代码

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

标签分类

  1. 文档标签：构成html最基本的标签

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

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

    <!-- 注释内容 -->
<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>

  3. 多媒体标签

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

  4. 列表标签
    有序列表ol
    无序列表ul

  5. 链接标签
    <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>

    设置锚点：当一个页面太长，可以设置锚点，通过超链接实现在页面内跳转。
    超链接标签可以嵌套图片，实现点击图片跳转的功能。

  6. 块级元素和行内元素
    <div> 是一个块级元素，至少占一行，上下没有空行。
    <p>是段落标记，段前后有空行。
    <span>是一个行内元素。

  7. 语义化标签：h5为了提高程序的可读性，提供了一些标签

    1. <header>页眉
    2. <footer>页脚

  8. 表格标签：定义表格，相当复杂，建议自己查文档

  9. 表单标签：用来向服务器传送数据

表单标签

表单：用于采集用户输入的数据，和服务器进行交互。
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属性

  1. text：文本输入框，默认值

    • placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

  2. password：密码输入框

  3. radio：单选框

    1. 要想让多个单选框实现单选的效果，则为其设置相同的name属性
    2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    3. checked属性可以指定默认值

  4. checkbox：复选框

    1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
    2. checked属性可以指定默认值

  5. file：文件选择框

  6. 按钮（很重要以至于有单独的<button>标签）

    1. button：普通按钮，必须结合js才有用
    2. submit：提交按钮，用来提交表单
    3. image：图片提交按钮，通过src指定图片路径

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

    <label for="username">用户名：<label>
<input type="text" name="username" placeholder="请输入用户名" id="username"><br/>
 <!-- label 的 for 属性值必须和文本框的id属性值一样, 点击 "用户名" 光标就会移入文本框-->

  8. select：下拉列表

    1. 子元素option：指定列表项

  9. 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标签内。

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

  1. 表单项没有name属性
  2. 单选、多选、下拉列表option都需要添加value属性，才能发送给服务器
  3. 表单项不在form标签体中
posted @ 2021-08-29 15:47  黄了的韭菜  阅读(32)  评论(0)  编辑  收藏  举报