HTML(基础篇)

这篇博客介绍了HTML的基础知识,包括HTML的基本结构、标签分类、文本、列表、图像、链接、表格和表单的使用。强调了HTML标签的重要性,以及如何创建链接、表单和表格。还提到了HTML5中新增的表单控件类型。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. HTML概述

  • 超文本标记语言(超文本:功能更强大;标记语言:由标记显示网页各部分)

  • 网页文件是通过添加标记符告知浏览器显示其中内容的文本文件。

  • 浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程

  • 网页存放在服务器上,运行在浏览器上,运行之前先从服务器上下载到本地,在本地浏览器上解析

2. HTML的基本使用

2.1 HTML的基本结构

  • html:根元素,所有其他的元素都应该放在html内;
  • head:网页头部;
  • body:网页的主体;
  • <!--注释-->:注释不可以嵌套
<!--这是一个HTML5-->
<!DOCTYPE html>
<!--根元素,lang表示语言-->
<html lang="zh-CN">
    <!--网页头部-->
    <head>
        <!--保存html页面时使用的码表,以及浏览器解析网页时使用的码表-->
        <meta charset="UTF-8">
        <title>标题</title> 
    </head> 
    <!--网页主体-->
    <body body的属性>
      	啦啦啦啦啦~啦
    </body>
</html>

2.2 HTML的标签

2.2.1 HTML标签分类
  • 按是否含主体分

    • 有主体的标签,即标签含开头和结尾
    • 无主体的标签,即在结尾处直接加标签

    有主体的意思是标签内部有封装数据

  • 按是否换行分

    • 块标签:每个标签独占一行,会自动换行
    • 内联标签:标签本省不会自动换行,所有内联标签都在同一行。
2.2.2 文本标签

常用标签如下:

常用标签名标签描述常用属性
h1~h6六级不同大小的标题(块标签)align:标题对齐方式(center居中、right 右对齐、left 左对齐);color:颜色
hr水平线align、width(长度)、size(粗细)
font(已过时)设置字体color、size、face(字体)等
b加粗,与strong标签功能相同/
I斜体/
br换行,无主体标签/
p段落,无首段缩进,段落之间有间距title:鼠标指着时显示一些提示信息
2.2.3 块标签与内联标签
  • div:块标签,分割页面,可用于文档布局;
  • span:内联标签,可用作文本的容器,以及为部分文本设置样式属性
2.2.4 列表标签
  • 有序列表(ol-li)

    <ol type = "type属性值">
        <li>内容1</li>
        <li>内容2</li>
        <li>内容3</li>
    </ol>
    

    其中type可以是1、A、I

  • 无序列表(ul-li)

    <ul type = "type属性值">
          <li>内容1</li>
          <li>内容2</li>
          <li>内容3</li>
    </ul>
    

    其中type可以是disc、circle、square

2.2.5 实体字符
  • 使用对应的实体字符,用来显示特殊符号

  • 实体字符的格式:以&开头,以分号结尾

常用特殊字符对应的实体字符
<&lt;
>&gt;
空格&nbsp; 
``¥`
2.2.6 图像标签
  • 用来显示图片

  • 基本语法

    <img src="文件地址"/>
    

    其中,src为图片地址

    注意,idea工具浏览html时,如果src使用非该模块的图片时会被禁用访问

除此以外还有其他属性:

**width**:图片宽度;	**height**:图片高度;	**alt**:图片丢失后替代图片的文字说明;	**title**:鼠标指向时显示的提示信息
2.2.7 链接标签
  • 作用:跳转页面、锚点链接、激活程序

  • 常用属性

    href 指定要跳转到的页面地址;

    title 鼠标指向后显示的文字;

    target _self 默认值,在当前的窗体中打开页面,_blank 在新的窗体中打开页面;

2.2.7.1 跳转页面
  • 基本语法

    <a href="链接地址">文字内容</a>
    
2.2.7.2 锚点链接
  • 设置锚点

    <a name="锚点名">文字内容</a>
    
  • 跳转到锚点位置

    <a name="#锚点名">文字内容</a>
    
2.2.7.3 激活程序
  • 基本语法

    <a href="mailto:邮件地址">文字内容</a>
    
2.2.8 表格标签
  • 作用:

    1. 用于显示大量的数据;
    2. 可以进行网页布局
  • 常用标签名:

    标签名作用
    table表格容器,不可见
    tr表示一行
    th列头,文字加粗和居中
    td普通的单元格,默认是左对齐
    caption表格的标题,出现表格的上面
    thead表格头部,不可见
    tbody表格的主体部分,浏览器解析会自动生成
    tfoot表格的脚步,不可见
  • 常用的表格属性

    • width:表格宽度
    • border:表格的边框粗细
    • align:对齐方式
    • rowspan:单元跨行
    • colspan:单元跨列
    • cellspacing:控制单元格间的间隔
    • cellpadding:控制单元格边框与内容之间的间隔

对于不规则的列数有两种解决思路

  1. 使用rowspan colspan 指定某一个单元格占指定的行数或者列数。
  2. 每一行都是一有一个单元格,单元格再嵌套table标签
2.2.9 注意事项

width属性如果是写成”width=100%“,意味着该标签的宽度跟随其父标签的宽度

3. HTML表单

3.1 表单标签

  • 作用:将浏览器的数据发送给服务器。

  • 标签:<form>

  • 可见性:表单标签在网页上不可见,是用来包含其他表单控件的容器。

3.1.1 form常用属性
常用属性作用
action提交给服务器的地址URL
method提交的方式,两种提交方式:GET或POST

其中:GET与POST在格式上的区别

GET:默认提交方式,提交的数据会在浏览器的地址栏上显示。分隔地址栏与参数,参数格式键=值,多参数用&分开。提交的数据大小有限制;

POST:提交的数据不会显示在地址栏上,安全性更高。提交的数据没有大小限制。
3.1.2 表单中的控件
  • <input>元素,包含以下几种常用type类型

    表单项控件代码属性备注
    text,文本框(默认)<input type="text" name="名字">type:指定控件的类型
    name:传递参数的名字
    value:文本框中默认值
    readonly:只读
    disabled:不可用的
    placeholder:用于文本框中的提示文字
    password,密码框<input type="password">同上输入的字符不可见
    radio,单选框<input type="radio" name="gender" value="男" checked="checked">checked:默认选中一个
    value:选中这一项的值
    名字相同的单选框是同一组(所以必须有name属性),一组中只能选中一个
    ckeckbox,复选框<input type="checkbox" name="hobby" value="摔♂跤" checked="checked">checked:默认选中一个
    value:选中这一项的值
    需要有name属性分组
    hidden,隐藏表单域<input type="hidden" name="id" value="值">name:这一项的名字
    value:选中这一项的值
    表单不可见,一般用于一些不需要用户看到的数据
    file,文件域<input type="file" name="photo" accept="image/*">accept:接收的文件类型
    submit,提交按钮<input type="submit" value="提交">value:按钮上显示的文字将个表单提交给服务器
    reset,重置按钮<input type="reset" value="重置">还原到开始的状态
    button,可点击按钮<input type="button" value="按钮">
    或者:看button元素介绍
    onclick:点击后会执行的内容主要用于后期程序开发,为该按钮添加具体功能
    image,图片按钮<input type="image" src="图片地址">与submit功能相同
  • 元素<select>:下拉列表;<option>元素:定义待选择的选项;

    <select name="character">
        <option value="JoJo">JoJo</option>
        <option value="dio哒" selected="selected">dio哒</option>
        <option value="GioGio">GioGio</option>
        <option value="花京院">花京院</option>
    </select>
    
    JoJo dio哒 GioGio 花京院

    其中,列表通常会把首选项默认显示,可用selected属性定义预定义选项。

  • 元素<textarea>:文本域,用于多行输入字段

    <textarea name="message" row="10",col="30">
        文本字段
    </textarea>
    

    其中:row:指定行数;col:指定列数

  • 元素<button>:可点击按钮,用于后期程序开发,为该按钮添加具体事件

    <button type = "button" onclick="alert('hello')">
        按钮
    </button>
    

    其中:onclick:点击后会执行的内容

  • 元素<datalist>:为<input>规定预定义选项列表(HTML5新特性)

    • 用户会在输入数据时看到预定义选项下拉列表
    • 元素<input>的list属性必须引用<datalist>的id属性
    <form>
        <input list ="browsers">
        <datalist id = "browsers"></option>
            <option value = "IE"></option>
            <option value = "safari"></option>
            <option value = "chrome"></option>    
        </datalist>
    </form>
    
3.1.3 表单的常用属性
  • action属性:定义在提交表格时执行的动作。(指定表单提交的服务器地址)

    • 向服务器提交表单通常用submit,且通常会被提交到web服务器上的网页;
    • 可以用action属性指定服务器脚本来处理被提交的表单。eg:<form action ="acttton_page.php">
  • method属性:规定提交表单时所用的HTTP方法(GET或者POST)

  • name属性:**每个输入的字段必须设置一个name属性才能正确提交。**去除name属性后仍能正常显示,但不能被提交

  • 元素<fieldset>:组合表单中的数据,可将表单中的内容封装在一起

    • <legend>作为<fieldset>定义标题;
    • <fieldset>使用style属性可改变整个圈内的文字等属性,而在<legend>使用style属性,仅修改<legend>元素内部的内容
注意事项(重要)
  1. 每个输入的表单项必须设置一个name属性才能正确提交!
  2. 提交的是表单中每个表单项的value值!
  3. 所以分为下面两种情况:
    • 表单项可以输入数据时,必须有name属性,但可以没有value属性,此时提交的就是输入的数据;value属性可以设置,那么value的值就是默认值;
    • 表单项不可输入数据时(如单选框),必须有value属性,此时提交的就是value属性值;可以没有name属性,不过可根据需求或标签要求增加name属性
  4. checked属性:选上时checked=“checked”。如果通过其他方法给checked属性赋值,则:true是勾选,false是没勾选
3.1.4 HTML5中新增的type类型
描述
color定义拾色器
date定义日期字段(带有calendar 控件)
datetime-local定义日期字段(带有calendar 和time 控件)
month定义日期字段的月(带有calendar 控件)
week定义日期字段的周(带有calendar 控件)
time定义日期字段的时、分、秒(带有time 控件)
email定义用于e-mail 地址的文本字段,如果输入不正确的邮箱地址有验证的功能
number定义带有spinner 控件的数字字段
range定义带有slider 控件的数字字段
search定义用于搜索的文本字段,当输入内容的时候,搜索框后边会自动出现一个小×,点击这个小×,可以清除输入的内容。
tel定义用于电话号码的文本字段,在手机上操作会出现输入数字的键盘。
url定义用于URL 的文本字段,在手机上操作会出现输入网址的键盘。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值