HTML基本语法

最新推荐文章于 2024-03-24 21:09:54 发布

summer-7

最新推荐文章于 2024-03-24 21:09:54 发布

阅读量201

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.youkuaiyun.com/summer_567/article/details/113740632

版权

HTML 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML的基础语法，包括HTML的定义、头部格式、图像、链接、列表、表格等元素的使用。此外，还讲解了媒体元素、页面结构分析，以及表单的初步认知，如POST和GET提交方式、表单元素格式和验证方法。

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

什么是HTML

HTML Hyper Text Markup Language(超文本标记语言) 超文本包括：文字、图片、音频、视频、动画等

格式

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
 
 </body>
 </html>

代表：网页头部

代表网页主体部分等成对标签，分别叫开放标签和闭合标签。单独呈现的标签（空元素），如 hr/；意用/来关闭空元素 DOCTYPE：告诉浏览器，我们要使用什么规范标题代表网页标题 meta 描述性标签，他用来描述我们网站的 meta 一般用来做SEO # 网页基本标签 ### 标题标签

<h1> </h1>  一级标签
 <h2> </h2>  二级标签
 <h3> </h3>  三级标签
 <h4> </h4>  四级标签
 <h5> </h5>  五级标签
 <h6> </h6>  六级标签
 2.段落标签     <p>  </p>
 3.换行标签     <br/>
 4.水平线标签    <hr/>
 5.字体样式标签   粗体：<strong></strong>  斜体： <em></em>
 6.注释和特殊符号标签     空格：&nbsp 大于：&gt  小于：&lt  版权符号：&copy

图像标签

常见图像格式：JPG GIF PNG BMP

 <img src="path" alt="text" title="text" width="x" height="y"/>

src: 图片地址（必填）相对地址（推荐使用），绝对地址 …/ 返回上一级目录 alt : 图片名字（必填）

链接标签

href:必填，表示要跳转到哪个页面 target:表示窗口在哪里打开 _blank 在新标签中打开 _self 在自己的网页中打开

 <a href="path" target="目标窗口位置">链接文本或图像</a>

文本超链接图像超链接

列表标签

<ol>
        <li></li>
</ol>
<ul>
        <li></li>
</ul>
 <dl>
        <dt>
            <dd></dd>
        </dt>
</dl>

li:表示每一行或列 ol:有序列表 ul:无序列表自定义列表：dl: 标签 dt：列表名称 dd：列表内容

表格标签

 <table>
       <tr>
           <td>
               
           </td>
       </tr>
  </table>

table:表格 tr：行 td：列 colspan ：跨列 rowspan：跨行

媒体元素

<video src=""></video>
<audio src=""></audio>

src:资源路径 controls：控制条 autoplay : 自动播放

页面结构分析

header 标题头部区域内容（用于页面或页面中的一块区域） footer 标记脚部区域的内容（用于整个页面或页面中的一块区域） section Web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用（常用于侧边栏） nav 导航类辅助内容

初识表单post和get提交

表单：form action:表单提交的位置，可以是网站，也可以是一个请求处理地址 method: post get 提交方式 get方式提交，我们可以在URL中看到我们提交的信息，不安全，高效 post：比较安全，传输大文件

表单元素格式

type: 指定元素的类型，text,password,checkbox,radio,submit,reset,file,hidden,image和button,默认为text, name: 指定表单元素的名称 value: 元素的初始值，type为radio时必须指定一个值 size: 指定表单元素的初始宽度，当type为text或password时，表单元素的大小以字符为单位，对于其他类型，宽度以像素为单位 maxlength:type为text或password时，输入的最大字符数 checked: type为radio或checkbox时，指定按钮是否被选中

文本框和单选框

文本输入框：input type = “text” value=“aa”：默认初始值 maxlength=“8” : 最长能写几个字符 size=“30”: 文本框的长度单选框标签：input type = “radio” value: 单选框的值 name: 表示组密码框： input type=“password” 登录：input type = “submit” 重置：input type = “reset”

按钮和多选框

<input type="button" > 普通按钮
<input type="image" >   图像按钮
<input type="submit" >   提交按钮
<input type="reset" >   重置按钮

多选框

列表框文本域和文件域

 <!--     selected:默认选中 -->
<p>
    <select name="列表名称" >
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="eth" selected>瑞士</option>
        <option value="yingdu">印度</option>
    </select>
</p>
<!-- 文本域
            cols="50"列 宽度
            rows = "10" 行 高度  
-->
    <p>
        <textarea name="textarea"  cols="30" rows="5"></textarea>
    </p>
    <!-- 文件域
        input type="file" name="files"
     -->
     <p>
         <input type="file" name="files">
     </p>

搜索框滑块和简单验证

 <!-- 邮箱验证 -->
    <input type="email" name="email">
    <!-- URL -->
    <input type="url" name="url">
    <!-- 滑块 -->
    <input type="range">
    <!-- 音量 -->
    <input type="range" name="voice" min="0" max="100" stop="2">
    <!-- 搜索框 -->
    <input type="search" name="search">