HTML基础-CSDN博客

本文链接：https://blog.csdn.net/qq_52508758/article/details/134305294

什么是HTML

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

HTML5优势：世界知名浏览器厂商对HTML5的支持、市场的需求、跨平台。
W3C：万维网联盟，成立于1994年，web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括：结构化标准语言（HTML、XML）、表现标准语言（CSS）、行为标准（DOM、ECMAScript）
常见IDE：记事本、Dreamweaver、IDEA、WedStorm等。

<html>
<head>
    <title>我的第一个网页</title><!--头标签-->
</head>
<body>
    我的第一个网站<!--主体标签-->
</body>
</html>

head标签代表网页头部

body标签代表网页主体

1、网页基本信息

注释：

1.1、DOCTYPE声明

DOCTYPE是一个文档类型，作用是告诉浏览器，我们要使用什么规范。

head标签代表网页头部

<head>      
</head>

body标签代表网页主体

<body>      
</body>

1.2、title标签

title代表网页标题

<title>网页标题</title>

1.3、meta标签

meta是描述性标签，它用来描述我们网站的一些信息。[一般用来做SEO（搜索引擎优化）]

<meta charset="UTF-8">
<meta name="keywords" content="关键词1,关键词2">
<meta name="description" content="描述">

keywords是关键词，description是描述。

2、网页基本标签

2.1、标题标签

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

2.2、段落标签

用来分段

<p>中秋节，又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等，是中国民间传统节日。</p>
<p>中秋节源自天象崇拜，由上古时代秋夕祭月演变而来。中秋节自古便有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗，流传至今，经久不息。</p>

2.3、换行标签

上面的段落标签，换成换行标签也可以但段落中间间距会小一点

中秋节，又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等，是中国民间传统节日。<br>
中秋节源自天象崇拜，由上古时代秋夕祭月演变而来。中秋节自古便有祭月、赏月、吃月饼、看花灯、赏桂花、饮桂花酒等民俗，流传至今，经久不息。<br/>

2.4、水平线标签

<hr/>

2.5、字体样式标签

<!--粗体-->
<strong>粗体标签</strong>
<!--斜体-->
<em>斜体标签</em>

2.6、注释和特殊符号

注释：<!--注释-->

特殊符号：
空格：&nbst;
大于：&gt;
小于：&lt;
版权号：&copy;
特殊符号记忆方式：&  ;

3、图像标签

常见图像格式：JPG、GIF、PNG、BMP等。

格式：

<img src="path" alt="text" title="text" width="x" heigjt="y"/>
  图像地址      图像的替代文字 鼠标悬停提示文字 图像宽度  图像高度

../代表返回上一级目录，src：图片地址[相对地址（推荐使用）、绝对地址]，alt：图片名字（必填）例：

<img src="../img/01.jpg" alt="图片名字" title="悬停文字" width="300" height="300">

4、链接标签

格式：

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

href="path"代表链接路径，例：

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

<a href="https://www.baidu.com">
  <img src="../../img/01.png"alt="婴儿" title="小婴儿"  width="328" height="213">
</a>     这是给图片加上链接

target表示窗口在哪里打开（常用值：_self、 _blank）, _blank代表会在新标签中打开， _self在自己的网页中打开。例：

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

4.1、超链接

页面间链接：从一个页面链接到另一个页面。（如上）
锚链接: 回到顶部：1.需要一个锚标记（使用name作为标记） 2.跳转到标记（也可以命名down跳到底部）

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

可以页面跳转：

<a href="04.html#top">跳转</a>

4.2、功能性链接

邮件链接：mailto：

<a href="mailto：123456789@qq.com">点击联系我</a>

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::53" alt="欢迎加我" title="欢迎加我"/></a>

5、行内元素和块元素

块元素：无论内容多少，该元素独占一行。（p、h1-h6）
行内元素：内容撑开宽度，左右都是行内元素的可以在排一行（a.strong.em…）

6、列表标签

列表就是信息资源的一种展示形式。它可以是信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷的获得相应的信息

列表分类：

1.有序列表（应用于试卷、问答等），格式：

<ol>
  <li>Java</li>
  <li>C/C++</li>
  <li>Python</li>
</ol>

2.无序列表（应用于导航、侧边栏），格式：

<ul>
  <li>Java</li>
  <li>C/C++</li>
  <li>Python</li>
</ul>

有序列表的列表符号:

type="A" A B C D ；

type="a" a b c d；

type="1" 1 2 3 4 ；

默认值type="I" I II III ；type="i" i ii iii

3.自定义列表（dl：标签；dt：列表名称；dd：列表内容。一般用于公司网站底部）,格式：

<dl>
  <dt>编程语言</dt>
  
  <dd>Java</dd>
  <dd>C/C++</dd>
  <dd>Python</dd>
</dl>

7、表格标签

表格特点：简单通用，结构稳定。

基本结构：单元格（table）、行（tr）、列（td）、跨行（rowspan）、跨列（colspan）

格式：

<table border="1px">
<!--border是加边框的后填宽度-->
<tr>
  <td colspan=“4”>1-1</td>
</tr>
<tr>
  <td rowspan=“2”>2-1</td>
  <td>2-2</td>
  <td>2-3</td>
</tr>
<tr>
  <td>3-1</td>
  <td>3-2</td>
  <td>3-3</td>
</tr>
</table>

注：可以先做一个最简单的表格然后再跨行和跨列，把挤出来的删掉就行了。

8、媒体标签

视频元素（video）,格式：

<video src="视频地址" controls autoplay width="宽" height="高"></video>

音频元素（audio），格式：

<audio src="音频地址" controls autoplay></audio>

注：controls（控制条）、 autoplay（自动播放）

9、网页结构分析

10、iframe内联框架

在一个网页里面嵌套另一个网页，格式：

<iframe src="path" name="mainFrame"></iframe>
<!--mainFrame是框架标识名-->

例：

<iframe src="https://www.baidu.com/" name="百度" frameborder="0" width="1000xp" height="800px"></iframe>

与超链接组合在网页中打开网页

<iframe src="" name="hello" frameborder="0" width="1000xp" height="800px"></iframe>
<a href="HTML01.html" target="hello">点击我跳转到页面1</a>

11、表单标签

11.1、表单语法

<form method="post" action="result.html">
<p>名字：<input name="name" type="text"></p ><p>密码：<input name="pass" type="password"></p > <p>
<input type="submit" name="Button" value="提交">
<input type="reset" name="Reset" value="重填“/></p >
</form>

method="post"规定如何发送表单数据表示向何处发送表单数据常用值：get | post

action="result.html"表示向何处发送表单数据

11.2、表单元素标记

11.3、表单应用

隐藏域（hidden）
只读（readonly）
禁用（disabled）

<body>

<h1>注册</h1>

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

<form action="HTML01.html" method="get">
    <!--文本输入框：input type="text"
    value="" 默认初始值
    maxlength="8"  最长能写几个字符
    size="30"  文本框长度
    -->
    <p>名字<input type="text" name="username" value="孤烟冷" maxlength="8" size="30"></p>
    <!--密码框：input type="password"-->
    <p>密码<input type="password" name="psd"></p>

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

    <!--多选框
    input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>写代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
    </p>
    
    <!--按钮
    input type="button" 普通按钮
    input type="image"  图像按钮
    input type="submit" 提交按钮
    input type="reset"  重置按钮
    -->
    <p>按钮：
        <input type="button" name="btn1" value="点击变长">
        <input type="image" src="../image/logo01.jpg" width="200" height="200">
    </p>

    <!--下拉框，列表框-->
    <p>国家：
        <select name="列表名称" id="列表id"><!--id可不要-->
            <option value="China">中国</option>
            <option value="US">美国</option>
            <option value="ETH" selected>瑞士</option>
            <option value="India">印度</option>
        </select>
    </p>

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

    <!--文件域 input type="file"
    name属性必须填
    -->
    <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="num" max="100" >
    </p>

    <!--滑块
    step每次加多少
    -->
    <p>音量:
        <input type="range" name="voice" min="0" max="100" step="2">

    </p>

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

    <!--
    readonly只读
    disabled禁用
    hidden隐藏
    -->

    <!--增强鼠标可用性-->
    <p>
        <label for="mark">你点我试试</label>
    <input type="text" id="mark">
    </p>

    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
</form>
</body>