最新HTML入门总结-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62375676/article/details/142902605

HTML（HyperText Markup Language）是构建网页的基础标记语言。它使用标签（Tags）来描述网页的结构和内容，例如文本、图像和链接。HTML 是一种静态标记语言，通过浏览器渲染为可视化页面，是网页开发的核心技术之一。

a、简单介绍

<html>
    // 网页头部
    <head>
        
    </head>
    // 主体部分
    <body>
        
    </body>
</html>

b、网页基本标签

1、标题标签

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

2、段落标签

<p> 跑的块，   跑的慢</p>
<p> 一致么有二点 一直没有眼睛</p>

3、换行标签

数和日当午<br/>
海底喝下肚<br/>
谁知盘中餐<br/>

4、水平线标签

<hr/>

5、字体样式标签

粗体: <strong> l love you</strong>
斜体: <em> l love you</em>
<i></i>
小写：<small></small>

6、注释和特殊符号

特殊符号记忆方式：先写 & 再写；

空格：&nbsp;
大于：&gt;
小于：&lt;
版权符号：&copy;

c、常见图像格式

<img src="../resources/image/家人.jpg" alt="和谐照片" title="悬停文字" width="300" height="300" >
相对地址
图片名字（必填）

在网页中常用的图像格式包括：

JPEG（.jpg）：适用于高质量照片，文件小。
PNG：支持透明背景，适合图标和图形。
GIF：适合简单动画和图标。
SVG：矢量格式，适合图形和标志，可随意缩放而不损失质量。

d、链接标签

<a href= "必填" target="表示窗口在哪里打开——新页面/原本页面"><a>

1、文本超链接

2、图像超链接

<a href="我的第一个网页.html"> 点击跳转到我的第一个页面</a>
<a href="http://baidu.com"> 点击跳转到百度</a>
<a href="我的第一个网页.html">
  <img src="../resources/image/家人.jpg" alt="和谐照片" title="悬停文字" width="300" height="300" >
</a>

锚链接

// 使用name 作为标记
<a name="top"> 顶部 <a/>
<a href="#top"> 回到顶部 <a/>
// 跳转页面也可以跟属性
<a href="链接标签 #down"><a/>

功能性链接

<!--邮箱-->
mailto
<a href="mailto:3181210886@qq.com"> 点击联系我</a>
<!--qq链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=24736743&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:24736743:53" alt="你好，加我" title="加我">
</a>

e、行内元素&块元素

块级元素（如 <div>, <p>, <h1> - <h6>）：独占一行，宽度自动填满父容器。

行内元素（如 <span>, <a>, <img>）：不独占一行，只占用内容所需的宽度。

f、列表

1、无序列表

<!--应用范围：导航、侧边栏-->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>梨</li>
  <li>哈密瓜</li>
</ul>

2、有序列表

<!--有序列表-->
<ol>
  <li>java</li>
  <li>python</li>
  <li>运维</li>
  <li>前端</li>
</ol>

3、定义列表

<!--定义列表
dl:标签
dt：列表名称
dd：列表内容
-->
<dl>
  <dt>学科</dt>

  <dd>java</dd>
  <dd>python</dd>
  <dd>c</dd>

  <dt>位置</dt>
  <dd>西按</dd>
  <dd>潍坊</dd>
  <dd>青岛</dd>
</dl>

g、表格

<!--表格table
行 tr
列 td-->

<table border="1px">
  <tr>
<!--    跨行-->
    <td colspan="4" >学生成绩</td>
  </tr>
  <tr>
<!--    跨行-->
    <td rowspan="2">战神</td>
    <td>语文</td>
    <td>100</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>100</td>
  </tr>
  <tr>
    <td rowspan="2">秦将</td>
    <td>语文</td>
    <td>90</td>
  </tr>
  <tr>
    <td>数学</td>
    <td>90</td>
  </tr>
</table>

h、媒体元素

1、视频元素

<!--音频和视频-->
<video src="../resources/video" controls></video>

2、音频元素

<!--音频和视频-->
<audio src="../resources/audio/今天是个好日子.m4a" controls></audio>

i、页面结构分析

header：标题头部区域的内容（用于页面或页面中的一块区域）

footer：标记脚部区域的内容（用于整个页面或页面的一块预取==区域）

section：web页面中的一块独立区域

nav：导航类辅助内容

<header>
  <h2>网页头部</h2>
</header>
<section>
  <h2>网页主体</h2>
</section>
<footer>
  <h2>网页脚本</h2>
</footer>

j、iframe内联框架

<!--iframe:内联框架，-->
<!--src： 地址-->
<!--w-h 宽度高度-->
<!--<iframe src="https://baidu.com" frameborder="0" width="300px" height="400px"></iframe>-->
<iframe src="" name="hello" frameborder="0"></iframe>
<a href="列表.html" target="hello"> 点击跳转 </a>
// 内联框架可以结合 超链接使用
// 就是在内联框架指定的区域里，显示超链接

k、表单

表单应用于登录、注册、搜索等功能，通过设置 action 和 method 来指定提交目标和方式，如 GET 或 POST。

1、表单标签

<!--action:表单提交的位置，可以是网站，也可以是一个处理请求地址-->
<!--method：post get提交方式-->
<!--get：方式高校，但是不安全，暴露在url中-->
<!--post： 安全，传输大文件-->
<form method="post" action="我的第一个网页.html">
  <p>名字： <input type="text" name="username"></p>
  <p>密码：<input type="password" name="pwd"></p>
  <p>
    <input type="submit">
    <input type="reset">
  </p>
</form>

p标签和span标签区别：

布局：p是块级元素，会独占一行，而span是行内元素，不会改变行内布局

间距：p会自动添加上下间距，而span不会添加任何间距

语义：语义上表示一个段落，span没有特定的语义，只是一个通用的行内容器

2、表单元素格式

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时，指定按钮是否是被选中

    <!--  单选框  -->
  <p>性别
      <input type="radio" value="boy" name="sex">男
      <input type="radio" value="girl" name="sex">女
  </p>
<!--    多选框-->
  <p>爱好：
      <input type="checkbox" value="boll" name="like">篮球
      <input type="checkbox" value="boll1" name="like">乒乓球
      <input type="checkbox" value="boll2" name="like">羽毛球
  </p>
<!--    按钮-->
  <p>按钮：
      <input type="button" name="btn1" value="点击边长">
      <input type="image" src="../resources/image/家人.jpg">
  </p>
<!--    下拉框  列表框-->
  <p>国家：
      <select name="列表名称">
          <option value="china">中国</option>
          <option value="us">美国</option>
          <option value="eth" selected>瑞士</option>
      </select>
  </p>
<!--   文本域 -->
  <p>反馈：
      <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
  </p>
<!--    文件域-->
  <p>
      <input type="file" name="files">
      <input type="button" value="上传" name="upload">
  </p>
<!--    邮件验证-->
  <p>邮箱：
      <input type="email" name="email">
  </p>
<!--    url-->
  <p>url:
      <input type="url" name="url">
  </p>
<!--    数字-->
  <p>数字：
      <input type="number" name="number" max="100" min="0" step="10">
  </p>
<!--    滑块-->
  <p>音量：
      <input type="range" name="voice" min="0" max="100">
  </p>
<!--    搜索框-->
  <p>搜索
      <input type="search" name="search">
  </p>