HTML基础

anyinglengtong

于 2023-09-09 20:40:24 发布

阅读量43

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/anyinglengtong/article/details/132679085

版权

HTML 超文本语言

W3C标准

结构化标准语言（HTML， XML）
表现标准语言（CSS）
行为标准（DOM，ECMAScript）
HTML的基本结构分为以下几个部分：

<!DOCTYPE html>：每个HTML文档的第一行都应该是这个声明，它告诉浏览器文档的类型是HTML5。
<html>：HTML文档的开始标签，里面包含了整个文档的内容。
<head>：文档头部标签，包括了一些描述文档的元数据，如标题、关键字、字符集等。
<body>：文档主题标签，包括了实际的内容，如文本、图像、音频、视频等。

下面是一个完整的HTML基本结构例子：

<!DOCTYPE html>
<html>
<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签，用来描述网站的一些信息-->
    <!--meta一般用来做SEO-->
    <meta charset ="UTF-8">
    <meta name="keyword" content="第一个网页">
    <!--title网页标题-->
    <title>My Webpage</title>
</head>
<!--body代表网页主体-->
<body>
<!--一级标题 h2 h3 h4...-->
<h1>Hello World!</h1>
<!--段落标签-->
<p>Welcome to my webpage.</p>
<!--水平线标签-->
<hr>
<!--换行标签-->
HTML (HyperText Markup Language) 是一种用于创建网页的标记语言。它定义了文本、图像、音频和视频等内容如何在网页上进行排版和展示，并通过标记和元素来描述网页结构和内容。<br/>

HTML 的标记语言是由一系列的标记和元素组成的，这些标记和元素以固定的格式来编写。通过使用这些标记和元素，开发者可以创建网页中不同类型的内容，如标题、段落、列表、链接、表格等。<br/>

HTML 是 Web 技术的基础，它可以与其他 Web 技术，如 CSS 和 JavaScript，一起使用来创建美观、交互式和动态的网页。HTML 还有许多版本，最新的版本是 HTML5，它引入了新的元素和语义标记，提高了 Web 应用程序的互动性和功能性。

<!--粗体  斜体-->
<h1>字体样式标签</h1>
粗体：<strong>标记语言是由一系列的标记和元素组成的</strong><br>
斜体：<em>标记语言是由一系列的标记和元素组成的</em>
<br>
<!--特殊符号-->
空 格:空&nbsp;&nbsp;&nbsp;格
<br>
&gt;
<br>
&lt;
<br>
&copy;ad 
<!--输入&课选择自己想要的符号-->


<!--image标签学习
src:图片地址
    相对地址  绝对地址
    ../ --上一级目录
alt:
-->
<img src="../resource/image/QQ图片20221230092137.jpg" alt="概念图" title="鼠标悬停文字" width="800" height="450" >
</body>
</html>

链接标签

<!DOCTYPE html>
<html>
<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签，用来描述网站的一些信息-->
    <!--meta一般用来做SEO-->
    <meta charset ="UTF-8">
    <meta name="keyword" content="第一个网页">
    <!--title网页标题-->
    <title>My Webpage</title>
</head>
<!--body代表网页主体-->
<body>
<!--a 链接标签
href :必填，表示要跳转的页面
target:表示窗口在哪里打开
    _blank：在新标签中打开
    _self:在自己网页中打开
-->
<a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>

<!--锚链接
1.需要一个锚标记
2. 跳转到标记
-->
<!--使用name作为标记-->
<a name ="top">顶部</a>
<p><a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>
    <img src="../resource/image/QQ图片20221230092137.jpg" alt="概念图" title="鼠标悬停文字" width="800" height="450" >
</p>

<p><a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a>
    <img src="../resource/image/QQ图片20221230092137.jpg" alt="概念图" title="鼠标悬停文字" width="800" height="450" >
</p>
<p><a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a></p>
<p><a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a></p>
<p><a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a></p>
<p><a href="http://www.baidu.com" target="_blank">点击我跳转到百度</a></p>
<a href="#top">回到顶部</a>
</body>
</html>

行内元素＆块元素

行内元素（Inline Elements）：

在一行内显示，不会独占一行。
它们的大小只由它们的内容决定。
例如：a、span、img、input、button等。

块元素（Block Elements）：

独占一行，会占满整个可用的宽度。
它们的大小由它们的宽度、高度、内部填充（padding）、边框（border）和外部边距（margin）共同决定。
可以容纳其他块级元素和行内元素。
例如：div、p、ul、li、h1~h6等。

在布局时，我们通常将块级元素用于布局结构，将行内元素用于内容展示。同时，通过CSS样式可以改变元素的显示方式，让行内元素表现为块级元素，或者让块级元素表现为行内元素。

列表

HTML中有2种类型的列表，无序列表（unordered list）和有序列表（ordered list）。以下是两种类型列表的代码示例：

无序列表

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

输出结果：

列表项1
列表项2
列表项3

有序列表

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

输出结果：

列表项1
列表项2
列表项3

自定义列表（definition list）

<dl>
  <dt>术语1</dt>
  <dd>定义1</dd>
  
  <dt>术语2</dt>
  <dd>定义2</dd>
  
  <dt>术语3</dt>
  <dd>定义3</dd>
</dl>

其中<dt>表示术语，<dd>表示定义。

表格标签


<!--表格table
<table>:是表格的标签，
<thead>:表头
<tbody>:表格的主体部分
<tr>:表示行
<th>:表示表头单元格
<td>:表示数据单元格
<caption>:则用于添加表格标题
行	tr
列	td
-->
<table>
  <caption>学生信息表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>成绩</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>男</td>
      <td>18</td>
      <td>85</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>女</td>
      <td>17</td>
      <td>92</td>
    </tr>
    <tr>
      <td>小刚</td>
      <td>男</td>
      <td>19</td>
      <td>78</td>
    </tr>
  </tbody>
</table>

媒体元素

以下是一个简单的HTML代码示例，包含一个视频元素和一个音频元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素示例</title>
</head>
<body>
<h1>视频示例</h1>
<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

<h1>音频示例</h1>
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    Your browser does not support the audio tag.
</audio>
</body>
</html>

其中，视频元素使用了<video>标签，包含了两个<source>标签，分别指定了两种不同格式的视频文件，同时也包含了一个controls属性，表示需要显示控制条。

音频元素使用了<audio>标签，同样包含了两个<source>标签，指定了两种不同格式的音频文件，同时也包含了一个controls属性，表示需要显示控制条。
autoplay自动播放
以上代码是一个简单的示例，实际应用中需要根据需要进行相应的调整和完善。

内联框架

内联框架是HTML中的一个元素，也被称为iframe。它可以在一个网页中嵌入另一个网页或文档。内联框架可以在一个页面中显示一个完整的网页，而不需要离开原始页面，这样就可以在一个页面上同时浏览多个网页。内联框架通常用于嵌入外部内容，如视频、Google地图等。

以下是一个内联框架的示例：

<iframe src="https://www.example.com" width="500" height="500"></iframe>

在上面的示例中，内联框架的源被设置为“https://www.example.com”，宽度和高度分别设置为500像素。这将在页面上创建一个500x500的框架，其中显示了外部网站的内容。

内联框架可以用于创建交互式的网页，其中用户可以与内嵌的内容进行互动。它还可以在网站上创建动态内容，并允许开发人员向网站添加新的功能。但是，使用内联框架也可能会导致一些问题，例如安全漏洞和运行速度缓慢。因此，使用内联框架时需要谨慎，并确保始终使用安全的内联框架源和最新的Web浏览器。

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以使网站，也可以是一个请求处理地址
method:post ,get 提交方式
        get方式提交：我们可以在url中看到我们提交的信息，不安全，高效
        post:比较安全，传输大文件
-->
<form action="http://baidu.com" method="post">
    <!--文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"></p>
    <!--密码框:input type="password" name="pwd"-->
    <p><input type="password" name="pwd"></p>
    <!--单选框标签
    input type="radio"
    value:单选框的值
    name：表示组
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex"/>男
        <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">编程
        <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="../resource/image/R-C.jpg">
    </p>
    
   <!--下拉框，列表框-->
    <p>下拉框：
        <select name="列表名称">
            <option value="选项的值">中国</option>
            <option value="选项的值">美国</option>
            <option value="选项的值">瑞士</option>
            <option value="选项的值">印度</option>
        </select>

    </p>
    
    <p>
        <input type="submit">
        <input type="reset">

    </p>
    <!--文本域-->
    <p>反馈：
   		<texterea name =" textarea" col="50" row="10">文本内容</textarea>
   	</p>
   	<!--文件域-->
   	<p>
   		<input type="file" name="files">
   		<input type="button" value="上传" name="upload">
   	</p>
</form>
</body>
</html>

表单的初级验证

<!--邮件验证-->
<p>邮箱：
	<input type="email"  name="email">
</p>
<!--url-->
<p>URL:
	<input type="url" name="url">
</p>
<!--数字-->
<p>商品数量:
	<input type="number" name="num" max="100" min="0" step="1">
</p>

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

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

课堂代码

<!DOCTYPE html>
<html lang="en"> 
<head> 
	<meta charset="UTF-8">
	<title>欢迎来到我的网站</title> 
</head>
<body>
	<p style="color:red;">这是我编写的第一个网页</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en"> 
<head> 
	<meta charset="UTF-8">
	<title>七律长征</title>
</head>
<body style="text-align: center;">
	<img src="./1.jpg" alt="长征" width="400">
	<h1>七律·长征</h1> 
	<p>红军不怕远征难，万水千山只等闲。</p>
	<p>五岭逶迤腾细浪，乌蒙磅礴走泥丸。</p> 
	<p>金沙水拍云崖暖，大渡桥横铁索寒。</p> 
	<p>更喜岷山千里雪，三军过后尽开颜。</p> 
</body>
</html>


<!DOCTYPE html>
<html lang="en"> 
<head> 
	<meta charset="UTF-8">
	<title>常用站点</title>
</head>
<body style="text-align: center;">
	<h1>常用网站</h1>
	<a href="http://www.baidu.com">百度首页
		<img src="./baidu.png" alt="百度" >
	</a>
	<a href="https://ww.ifeng.com">凤凰首页
		<img src="./ifeng.png" alt="凤凰" 
	</a>
	<br>
	<a href="https://www.sina.com.cn">新浪首页
		<img src="./sina.png" alt="新浪" 
	</a>
	<a href="https://www.sohu.com">搜狐首页
		<img src="./sohu.png" alt="搜狐" 
	</a>
</body>
</html>