HTML基础

最新推荐文章于 2024-10-09 11:13:12 发布

路飞Fly了

最新推荐文章于 2024-10-09 11:13:12 发布

阅读量3.6k

点赞数

文章标签： java 算法 1024程序员节

本文链接：https://blog.csdn.net/lufeia/article/details/121517801

版权

本文详细介绍了HTML的基础结构，包括head、body、meta标签的使用，以及基本标签如标题、段落、链接、列表、表格等的语法。此外，还涵盖了媒体元素、页面布局和表单元素的实例，适合初学者快速掌握HTML基础知识。

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

HTML基础

1.基础结构

head：代表网页头部

meta：描述性标签，它用来描述我们网站的一些信息，一般用来做SEO

body：代表网页主体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x3R5UUX1-1637740845134)(C:\Users\22341\AppData\Roaming\Typora\typora-user-images\image-20211124153649404.png)]

2.基本标签

2.1 标题标签

h1 ~ h6

2.2 段落标签

2.3 换行标签

2.4 水平线标签

2.5 粗体、斜体

strong em

2.6 特殊符号

空格：
大于：>
小于：<

特殊符号记忆方式

& ;
中间打一个字母就会有提示

3.图像标签

img标签
src：图片地址（必填）
路径：相对地址（推荐使用）绝对地址
…/ --上一级目录
alt:图片名字（必填）

<img src="../resource/luffy.jpg" alt="路飞头像" width="100" height="100" title="这是路飞头像"/>

4.链接标签

a标签
href：必填，表示要跳转到哪个页面
target：表示窗口在哪里打开
_blank：在新标签中打开
_self：在本网页打开（默认）

<a href="https://www.baidu.com" target="_blank">点我跳转到百度网页</a>

锚链接
1：需要一个锚标记
2：跳转到标记

<a href="#top">点我回到顶部</a>

功能性链接
邮件链接：mailto
QQ链接（去QQ推广里面可以一键生成）

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
  <img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="点我咨询路飞" title="点我咨询路飞"/>
</a>

5.列表标签

有序列表（应用范围：试卷，问答…）

<ol>
  <li>Java</li>
  <li>Python</li>
  <li>Linux</li>
</ol>

无序列表（应用范围：导航，侧边栏…）

<ul>
  <li>Java</li>
  <li>Python</li>
  <li>Linux</li>
</ul>

自定义列表（dl：标签，dt：列表名称，dd：列表内容）

<dl>
  <dt>学科</dt>
  <dd>Java</dd>
  <dd>Python</dd>
  <dd>Linux</dd>
</dl>

6.表格标签

表格table
行：tr rows
列：td cols

rowspan：跨行

colspan：跨列

<table border="1px" >

  <tr>
    <!-- colspan 跨列 -->
    <td colspan="3">学生成绩</td>
  </tr>

  <tr>
    <!-- rowspan 跨行-->
    <td rowspan="2">狂神</td>
    <td>语文</td>
    <td>100</td>
  </tr>

  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>

  <tr>
    <!-- rowspan 跨行-->
    <td rowspan="2">琴疆</td>
    <td>语文</td>
    <td>100</td>
  </tr>

  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>

</table>

7.媒体元素

音频和视频
src：资源路径
controls：控制条（必填，有了它才能播放）
autoplay：自动播放

<!--视频-->
<video src="" controls autoplay></video>
<!--音频-->
<audio src="" controls autoplay></audio>

8.页面结构分析

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

<header>
  <h2>页面头部</h2>
</header>

<section>
  <h2>页面主体</h2>
</section>

<footer>
  <h2>页面脚部</h2>
</footer>

9.内联框架

iframe内联框架（可以配合a标签使用，点击a标签操作内联框架）
src：地址
w—-h：宽度高度

<iframe src="https://www.baidu.com" name="neilian" height="800px" width="1000px"></iframe>

<a href="5.列表标签.html" target="neilian">点我打开内联框架</a>

<!-- B站复制内联框架视频地址 -->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

10.表单

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

表单的应用
hidden：隐藏
readonly：只读
disabled：禁用

表单初级验证
placeholder：提示信息
required：非空判断
pattern：正则表达式

<p>注册</p>

<form method="get" action="1.我的第一个网页.html">
     <!-- 文本框 <input type="text">
         value：默认初始值
         max：最长能写几个字符
         size：文本框的长度
     -->
  <p>账号：<input type="text" name="username" maxlength="8" size="20" placeholder="请输入账号" required></p>


    <!-- 密码框 <input type="password"> -->
  <p>密码：<input type="password" name="password" hidden></p>


    <!-- 单选框标签
         input type="radio"
         value：单选框的值
         name：表示组
     -->
  <p>性别：
      <input type="radio" name="sex" value="boy" checked disabled>男
      <input type="radio" name="sex" value="girl">女
  </p>


    <!-- 多选框
    input type="checkbox"
    -->
  <p>爱好：
      <input type="checkbox" name="hobby" value="sleep">睡觉
      <input type="checkbox" name="hobby" value="code">敲代码
      <input type="checkbox" name="hobby" value="chat" checked>聊天
      <input type="checkbox" name="hobby" value="game">游戏
  </p>


    <!-- 按钮
        input type="button" 普通按钮
        input type="image" 图像按钮
        input type="submit" 提交按钮
        input type="reset" 重置
     -->
  <p>按钮：
      <input type="button" name="btn_01" value="点击变长">
<!--      <input type="image" src="../resource/luffy.jpg">-->
  </p>


    <!-- 下拉框  列表框
        select：选项列表
        option：选项
            value：选项值
     -->
    <p>国家：
        <select name="列表名称">
            <option value="china">中国</option>
            <option value="mg">美国</option>
            <option value="rs" selected>瑞士</option>
            <option value="yg">英国</option>
        </select>
    </p>


    <!-- 文本域
        cols：列长度
        rows：行长度
     -->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>



    <!-- 文件域
        input type=“file” name=“files”
     -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>



    <!-- 邮箱
        input type="email"
     -->
    <p>邮箱：
        <input type="email" name="email">
    </p>



    <!-- URL
        input type="url"
     -->
    <p>URL：
        <input type="url" name="url">
    </p>



    <!-- 数字
        input type="number" name="number" max="10" min="1" step="1"
     -->
    <p>商品数量：
        <input type="number" name="number" max="10" min="1" step="1">
    </p>




    <!-- 滑块
        input type="range" name="voice" max="100" min="1" step="2"
    -->
    <p>音量：
        <input type="range" name="voice" max="100" min="1" step="2">
    </p>




    <!-- 搜索框
        input type="search"
     -->
    <p>搜索：
        <input type="search" name="search" id="mark">
    </p>




    <p>
        <label for="mark">你点我试试：</label>
        <input type="text">
    </p>




    <!-- 自定义邮箱（正则表达式）
        input type="email"
        pattern：正则表达式验证
     -->
    <p>自定义邮箱：
        <input type="email" name="email" pattern="^[-\w]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$">
    </p>





  <input type="submit">
    <!-- 重置表单值 -->
  <input type="reset" value="重置按钮">

</form>