HTML的基础知识总结_htmldejichuzhishi-CSDN博客

本文链接：https://blog.csdn.net/2201_75749194/article/details/129841853

本文介绍了HTML的基本结构和常用标签，包括<b>、<i>、<del>等文本格式化标签，<br>、<p>、<div>等布局标签，以及<form>表单中的<input>、<textarea>、<select>元素及其属性。此外，还讲解了<a>标签的链接功能，表格布局以及<img>、<audio>、<video>媒体元素的使用。

摘要由CSDN通过智能技术生成

html的大致结构为代码所示,注意html中的标签是成对存在的。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTE-8>
   <title>网页标签<title>
</head>
<body>

</body>
</html>

html中常用的简单标签

<b>与<strong>标签	此标签是用来加粗字体的
<i>与<em>标签	此标签是让字体变倾斜
<del>标签	此标签为删除线
<u>标签	此标签为文字下面加下划线
<br>标签	此标签作用为换行
<pre>标签	此标签为格式化标签
<p>标签	此标签为段落标签，单独一行自动换行
<div>标签	此标签为网页布所用
<span>标签	此标签用来修饰文本
<sup>标签	此标签为上标
<sub>标签	此标签为下标
<hr>标签	此标签为水平分割线
<hn>标签	此标签为题目标签，设计标题字体大小

<!DOCTYPE  HTML>
<html>
   <head>
      <meta charest="utf-8"/>
      <title>常用标签的使用</title>
   </head>
   <body>
         <b>我很高兴</b>                    <!--粗体-->
         <strong>我也会让你很高兴</strong>   <!--也是粗体-->
         <i>哟</i>                         <!--斜体-->
         <em>嘿嘿</em>                     <!--也是斜体-->
         <u>第一句话</u>                    <!--下划线--> 
         <del>不行，我不能认识你</del>       <!--删除线-->
         <p>一句话完了直接换行</p>  
         <hr width="900",noshade>          <!--水平分割线-->
         <h1>1号标题</h1>
         <h2>2号标题</h2>
         <h3>3号标题</h3>                   <!--hn标签是标题标签从h1到hn字体大小依次减小-->
   </body>


</html>

2.1表单标签，表单标签由3种标签组成分别为，input，textarea，select，在表单中才能使用

input标签，input的表单语法格式为<input type="元素类型" name="元素名称" value="元素值">

name	字符串	元素的名字
value	字符串	元素的值
ID	字符串	客户端的标识
size	数字	以字符个数来定义高度
maxlength	数字	元素接受的上限
checked		元素是否被选中

其中特殊的元素定义标签lable标签为input元素不会呈现出任何样式；

readonly... 属性规定只能读，只读片段不能改写；

disable...被禁用的input不能用，不能点击

required...提交时，元素中为空白是不能提交，同时会提示文字；

autofocus...当页面打开是会自动获得光标；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charest="UTF-8>
    <title>form表单</title> 
</head>
<body>
   <lable for="usename">用户名称：</lable>
   <input type="text" id="usename" name="usename" value="zhangsan" readonly><br/>
   <input type="text" name="usename" value="zhangsan" disabled><br/>
   <input type="password" name="password" placehoder="请输入您的密码" required autofocus><br/>
   <input type="radio" value="男" name="gender" checked>男<input type="radio" value="女" 
    name="gender">女<br/>
  </body>
</html>

其中type的属性有：

type="text"	单行文本框
type="password"	密码框
type="reset"	重置框
type="radio"	单选按钮
type="checkbox"	多选按钮
type="button"	按钮
type="submit"	提交按钮
type="image"	图像按钮
type="hidden"	隐藏域
type="file"	文本域

<input type="text"/>单行文本框用来输入常用的信息，常用的属性为name，value，maxlength；

<input type="password"/>密码输入框为输入密码；

<input type="radio"/>单选按钮为单项选择，在使用是选择的内容属性必须相同，不是相同属性则无法生效，使用的时候自动选择第一个元素，加上checked属性可以默认中间选项；

<input type="checkbox"/>常用于多项选择，与radio标签相同加上checked可以默认中项；

<input type="reset"/>重置按钮，当用户信息有误时，可单击重置按钮取消所输入的信息；

<input type="image"/>图像按钮与button属性相同，只是用图像替代了默认的按钮，图像src属性需要指定url地址；

<input type="submit"/>输入完信息后需要提交，则使用submit提交按钮；

<input type="email"/>此输入框是输入email邮箱的输入框；

<input type="tel"/>提供输入电话号码的文本框；

<!DOCTYPE HTML>
<html lang="en">
<head>
   <meta charest="UTF-8">
   <title>form表单</title>
</head>
<body>
    <input type="submit" value="注册用户"><br/>
    <input type="reset" value="重置数据"><br/>
    <inout type="submit" value="提交"><br/>
    <input typr="email" name="email" placehoder="请输入你的邮箱"><br/>
    <input type="tel" name="" id="" value="">
    <input type="date"  name="" id="" value="">
    <input type="time" name="" id="" value="">
    <input type="rang"  name="" id="" value="">
    <input type="url" name="" id="" value="">
您的爱好：
   <input type="checkbox" value="football" name="fav">足球
   <input type="checkbox" value="篮球" name="fav">篮球
   <input type="checkbox" value="LOL" name="fav">LOL
   <input type="checkbox" value="乒乓球" name="fav">乒乓球
   <input type="checkbox" value="跳舞" name="fav">跳舞    <!--input标签的属性值以及checkbox标签的作用-->

2.2select标签

select标签元素主要以下拉框表示，当slect设置了multiple时，则是一列表的形式显示；

属性名称	属性值	属性作用
option	子项	下拉框的选项
value	字符串	选项的值
name	字符串	下拉框的名称
slected		默认的选项
multiple	"multiple"	一列表的形式显示

<!DOCTYPE HTML>
<html lang="en">
<head>
    <mate charest="UTF-8">
    <title>form表单</title>
</head>
<body>
   你喜欢的动物：
   <select>
     <option value="猫">猫</option>
     <option value="狗">狗</option>
     <option value="猴子">猴子</option>
     <option value="熊猫">熊猫</option>
   </select>    <!--没有假multiple则是以下拉框的形式显示-->
 
   你喜欢的运动：
   <select multiple="multiple">
      <option value="篮球">篮球</option>
      <option value="足球">足球</option>
      <option value="网球">网球</option> 
      <option value="跳绳">跳绳</option>
    </select>     <!--加了multiple显示则是表格-->

2.3textarea标签

该标签的表达方式为，<textarea cols=" " rows=" "></textarea>

属性名称	属性值	属性作用
cols	数字	以字符个数设定的文本框的宽度
rols	数字	以字符个数设定的文本框的高度
name	字符串	多行文本框的名称

2.4a标签的使用方法

值	描述
-blank	在新窗口打开
-self	默认，在相同的窗口打开
-top	在整个窗口打开
franmname	在指定窗口打开

2.5表格的布局

表格的标签有，table，thread，tbody，tfoot，td，tr；表格边框的标签为border，表格的宽度为width，表格的高度为height，表格的对其方式为align标签有right，left，center；表格的背景颜色标签为bgcolor，background表示为背景图像，表格的边距标签为cellpadding，表格的间距标签为cellspacing

属性名	属性值	功能
width	数字	单元格的高度
height	数字	单元格宽度
align	left center right（左中右）	单元格水平对齐方式
valign	top middle bottom（上中下）	单元格垂直对齐方式
bgcolor	颜色	单元格的背景色
rowspan	数字	垂直方向的背景色
colspan	数字	水平方向跨列

<!DOCTYPE HTML>
<html lang="en">
<head>
   <meta charest="UTF-8">
   <title>表格的布局</title>
</head>
<body>
<table width="400" border="1" cellspadding="0" cellspacing="0">
   <tr>
       <td></td>
       <td></td>
       <td></td>
    </tr>
   <tr>
        <td></td>
        <td></td>
        <td></td>
   </tr>
   <tr>
         <td></td>
         <td></td> 
         <td></td>
   </tr>
</body>
<html>

其中表格中的tr与td也可以设置颜色，tr中的height表示行高，bgcolor用16进制表示；

表格中的行与列可以合并，rowspan=" "表示合并多少行；colspan=" "表示合并多少列

2.6照片的插入<img src="图片1".png" width=" " height=" " align=" ">其中src表示图片的位置可以文件中的，也是是绝对路径，width表示图片的宽度，height表示图片的高度，align表示图片的位置；放置音频则是<audio src=" " autoplay controls>其中的autoplay表示自动播放，放置视频则是<video src=" " autoplay controls>其中路径为绝对路径，