HTML学习

最新推荐文章于 2024-04-03 12:58:00 发布

Jiettt-_-

最新推荐文章于 2024-04-03 12:58:00 发布

阅读量1.4k

点赞数

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

本文链接：https://blog.csdn.net/qq_67858958/article/details/123862691

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一网站是由一个一个网页构成的，而网页其实就是放在服务器上的一个文件，当我们浏览网页时，这个文件会被下载到我们本地的电脑，然后再由浏览器解析，渲染出各种漂亮的界面，比如表格、图片、标题、列表等。网页本质都是一样的，就是由 HTML 代码构成的纯文本文件。

二 HTML ---->英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页，给网页内容进行排版和布局的。
1. 超文本，也即超越纯文本，这意味着 HTML 文档不仅能包含文本（文字），还能包含图片、音视频、表格、列表、链接、按钮、输入框等高级内容。
2. 标记语言，HTML 是一种计算机语言，但它不能编程，没有逻辑处理能力，没有计算能力，不能动态地生成内容，只能用来标记网页中的内容，静态地展示网页信息。通过不同的标签来标记不同的内容、格式、布局等。

三 HTML标签 ----> HTML中的不同标签具有不同的含义，学习 HTML 其实就是学习各个标签的含义，根据实际场景的需要，选择合适的标签，从而制作出精美的网页。
HTML标签分类：单标签 <xxx /> 单标签一般具备特殊功能不包裹其他标签
双标签 <xxx></xxx> 通常包裹其他标签或文本
标签中包含的属性：
1. 通用属性：
id属性，用来赋予某个标签唯一的名称（标识符），当我们使用 CSS 或者 JavaScript 来操作这个标签时，就可以通过 id 属性来找到这个标签
class 属性，与 id 属性类似，class 属性也可以为标签定义名称（标识符），不同的是 class 属性在整个 HTML 文档中不必是唯一的，我们可以为多个标签定义相同的 class 属性值。另外，还可以为一个 HTML 标签定义多个 class 属性值
title属性，用来对标签内容进行描述说明，当鼠标移到该标签上方时会显示出title属性的值
style属性，用来在 HTML 标签内部为标签定义 CSS 样式，例如设置文本的颜色、字体等
2. 专用属性不同的标签有各自的属性：
<img> 标签中的 src 属性用来定义图像的路径，alt 属性用来定义图像的描述信息，当图像出现异常无法正常显示时就会显示 alt 中的信息。
<a> 标签的 href 属性用来定义链接的地址，target 属性用来定义新页面在浏览器中的打开方式。

<img src="./logo.png" alt="我的Logo" width="100px" height="50px" />
<a href="https://www.baidu.com" target="_blank">C语言中文网</a>

3. 转义符：
< 小于 > 大于   小空格 &ensp; 中空格 &emsp; 大空格 " 引号 © 公司 & &符号

四常用的标签
1. <!DOCTYPE html>：这是文档类型声明，用来将文档声明为 HTML 文档（从技术上来说它并不是标签），doctype 声明不区分大小写；
2. <html> </html>：该标签是 HTML 页面的根标签，其他所有的标签都需要在 <html> 和 </html> 标签之间定义；
3. <head> </head>：该标签中用来定义 HTML 文档的一些信息，例如标题、编码格式等等；
4. <meta charset="UTF-8">：用来指明当前网页采用 UTF-8 编码，UTF-8 是全球通用的编码格式，绝大多数网页都采用 UTF-8 编码；
5. <title> </title>：该标签用来定义网页的标题，网页标题会显示在浏览器的标签栏；
6. <body> </body>：该标签用来定义网页中我们能通过浏览器看到的所有内容，例如段落、标题、图片、链接等等；

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>HTML演示</title>
</head>
   <body>
   功能代码块
   </body>
</html>

7. <h1>到<h6> 六个级别的标题标签，<h1>标签的级别最高字体最大，来标记最重要的标题，该标题通常位于页面顶部，且一个 HTML 文档中通常应该有且仅有一个<h1>标题；<h2>~<h6>标签的级别依次变低字体依次变小，使用则可以不加限制。通过这些标签可以定义网页中的标题（与 word 中的标题类似），但只能用来定义标题，不可以使用标题标签来对文本进行加粗设计；合理使用标题可以使网页的层次结构更加清晰。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML标题标签演示</title>
</head>
<body>
    <h1>h1 标题</h1>
    <h2>h2 标题</h2>
    <h3>h3 标题</h3>
    <h4>h4 标题</h4>
    <h5>h5 标题</h5>
    <h6>h6 标题</h6>
</body>
</html>

8. <p>段落中的内容</p> 段落标签与 <br />换行标签
<p></p>段落标签由开始标签<p>和结束标签</p>组成，开始和结束标签之间的内容会被视为一个段落。用来显示文本，而不用来布局。
<br />标签属于自闭和标签，因此不需要对应的结束标签。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>使用&lt;p&gt;与&lt;br&gt;标签</title>
</head>
<body>
    <p>百度网址<br />https://www.baidu.com<br />HTML教程</p>
</body>
</html>

9. <div></div>块级元素标签与 <span></span>行内元素标签
<div></div>纯块级元素，独占一行，使用<div> 标签用来布局页面的各个部分，而不用来显示文本，通过与 CSS 相结合可以实现各种各样的效果。
<span></span> 是一个内联元素，可以对 HTML 文档中的内容进行修饰，此标签不会为文档内容提供任何视觉效果，但可以与 CSS 结合使用来美化网页。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>&lt;div&gt;标签 与 &lt;span&gt;标签演示</title>
</head>
<body>
    <div style="padding:0px 20px;border:1px solid #ccc; background-color:#eee;">
        <h4>HTML<span>教程目录</span></h4>
        <div>块内的块级元素</div>
        <span>行内元素</span>
    </div>
</body>
</html>

10. 其他的行内元素标签
<strong> 标签用来强调文本，加粗只是附带效果；<b> 标签用来从视觉上加粗文本，引起读者注意，<u></u> 标签用来给文本加下划线；<em></em>标签用来将文本变为斜体；<hr />标签在行内行程分割线；

11. 列表标签 HTML 为我们提供了三种不同形式的列表：
有序列表，使用 <ol> + <li> 标签；<ol> 表示有序列表，<li> 表示列表中的每一项，默认使用阿拉伯数字编号。
无序列表，使用 <ul> + <li> 标签；<ul> 表示无序列表，<li> 表示列表中的每一项，默认使用●符号作为作为每一项的标记。
定义列表，使用 <dl> + <dt> + <dd> 标签；<dl> 表示定义列表，<dt> 表示定义术语、<dd> 表示定义描述。一般情况下，每个 <dt> 搭配一个 <dd>，一个 <dl> 可以包含多对 <dt> 和 <dd>。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>HTML有序列表，无序列表，定义列表</title>
</head>
<body>
    <p>煮米饭的步骤：</p>
    <ol>
        <li>将水煮沸</li>
        <li>加入一勺米</li>
        <li>搅拌均匀</li>
        <li>继续煮10分钟</li>
    </ol>
    <p>早餐的种类：</p>
    <ul>
        <li>鸡蛋</li>
        <li>牛奶</li>
        <li>面包</li>
        <li>生菜</li>
    </ul>
    <dl>
        <dt>HTML</dt>
        <dd>HTML 是一种专门用来开发网页的标记语言</dd>
        <dt>CSS</dt>
        <dd>CSS 层叠样式表可以控制 HTML 文档的显示样式，用来美化网页</dd>
        <dt>JavaScript</dt>
        <dd>JavaScript 简称 JS，是一种用来开发网站（包括前端和后台）的脚本编程语言</dd>
    </dl>
</body>
</html>

12. <a> 标签，超链接标签
语法：<a href="url" target="opentype">链接文本</a>，href 属性用来指明要跳转到的 url 地址；target 属性用来指明新页面的打开方式，要么不写，保持默认的 _self，要么将它的值设置为 _blank；链接文本需要写在 <a> 和 </a> 之间。

href 链接地址方式
1.相对路径 ./当前目录 ../退回上级目录当前文件与目标文件所经过的路径当前项目跳转
2.相对根路径 /根对应的资源地址 /day1_html/js/1html编写规则.html 当前项目跳转
3.绝对路径 https://www.baidu.com完整地地址跳转到外部链接

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>HTML &lt;a&gt;标签演示</title>
</head>
<body>
    <p>
        <a href="https://www.baidu.com" target="_blank">百度地址（新窗口打开）</a><br>
        <a href="https://www.baidu.com">百度地址（当前窗口打开）</a><br>
    </p>
</body>
</html>

13. <table></table>表格标签大小可以用width 和 height控制
<table></table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间。
<tr></tr>是 table row 的简称，表示表格的行。表格中有多少个 <tr> 标签就表示有多少行数据。
<td> </td> 是 table datacell 的简称，表示表格的单元格，这才是真正存放表格数据的标签。单元格的数据可以是文本、图片、列表、段落、表单、水平线、表格等多种形式。默认左对齐，使用属性align="center" left right来调整位置。
<th> 是 table heading 的简称，表示表格的表头。<th> 其实是 <td> 单元格的一种变体，本质上还是一种单元格。<th> 一般位于第一行，充当每一列的标题。大多数的浏览器会把表头显示为粗体居中的文本。
<caption></caption>是表格的标题，位于整个表格的第一行并且居中显示，一个表格只能有一个标题。
rowspan 属性表示向下合并单元格（跨行），colspan 属性表示向右合并单元格（跨列）。每次合并 n 个单元格都要少写 n-1 个<td>标签。

<table border="1">
   <caption>这是表格的标题</caption>
   <tr>
     <th>名称</th>
     <th>官网</th>
     <th>性质</th>
   </tr>
   <tr>
     <td>哔哩哔哩弹幕网</td>
     <td>https://www.bilibili.com/</td>
     <td>视频</td>
   </tr>
    <tr>
     <td>百度</td>
     <td>http://www.baidu.com/</td>
     <td>搜索</td>
     </tr>
   <tr>
      <td>当当</td>
     <td>http://www.dangdang.com/</td>
      <td>图书</td>
    </tr>
</table>

14. <form></form>表单标签
表单可以接收用户输入的信息，然后将其发送到后端应用程序。表单属于 HTML 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。
具体语法如下所示：
action 属性用来指明将表单提交到哪个页面。
method 属性表示使用哪个方式提交数据，包括 GET 和 POST 两种方式，区别如下：
GET：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。
POST：如果表单包含密码这种敏感信息，建议使用 POST 方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。

<form action="URL" method="GET|POST">
    <input type="text" name="myname" />
			<input type="submit" />
</form>

表单控件：<input> 定义输入框 <textarea>定义文本域（一个可以输入多行文本的控件）
<label> 为表单中的各个控件定义标题 <fieldset> 定义一组相关的表单元素，并使用边框包裹起来<legend> 定义 <fieldset> 元素的标题 <select> 定义下拉列表 <optgroup> 定义选项组
<option>定义下拉列表中的选项 <button>定义一个可以点击的按钮

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>HTML form表单演示</title>
</head>
<body>
    <form action="./userinfo.php" method="POST">
        <!-- 文本输入框控件 -->
        <label>用户名： </label><input name="username" type="text"><br>
        <!-- 密码框控件 -->
        <label>密&emsp;码： </label><input name="password" type="password"><br>
        <!-- 下拉菜单控件 -->
        <label>性&emsp;别：</label>
        <select name="sex">
            <option value="1">男</option>
            <option value="2">女</option>
            <option value="3">女装大佬</option>
        </select>
        <br>
        <!-- 复选框控件 -->
        <label>爱&emsp;好：</label>
        <input type="checkbox" name="hobby" value="1">听音乐
        <input type="checkbox" name="hobby" value="2">看电影
        <input type="checkbox" name="hobby" value="3">打游戏
        <br>
        <!-- 单选按钮控件 -->
        <label>学&emsp;历：</label>
        <input type="radio" name="education" value="1">小学
        <input type="radio" name="education" value="2">中学
        <input type="radio" name="education" value="3">本科
        <input type="radio" name="education" value="4">硕士
        <input type="radio" name="education" value="5">博士
        <br>
        <!-- 按钮 -->
        <input type="submit" value="提 交">&emsp;&emsp;
        <input type="reset" value="重 置">
    </form>
</body>
</html>
     /*  type="text"
			 maxlength  最大长度
			 value      值
			 placeholder  提示信息
			 readonly     只读
			 disabled    禁用效果 会忽略当前的元素
		 type="password"  属性同文本框
		 type="hidden" 隐藏框  一般用户传递不让用户看见的数据
		 
		 type="radio"  单选框
		     name      分组
			 value     当前选项框的值
			 checked   默认选中
		 type="checkbox" 多选框
		     name      分组  会有同名参数发送
			 value     当前选项框的值
			 checked   默认选中
		
		 type="button"   自定义按钮
			  value     按钮文本
			  disabled  禁用按钮
		 type="submit"	  提交按钮   提交当前表单
		 type="reset"	  重置按钮   重置当前表单
		 
		 select   下拉列表  name="mysel" 标记name属性   multiple="multiple 变成多选
		    option  列表选项  value="021"  选项的值   selected="selected" 默认选中
		
		 textarea  多行文本  name="myarea" rows="5" cols="50" */

Jiettt-_-

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML学习

一网站是由一个一个网页构成的，而网页其实就是放在服务器上的一个文件，当我们浏览网页时，这个文件会被下载到我们本地的电脑，然后再由浏览器解析，渲染出各种漂亮的界面，比如表格、图片、标题、列表等。网页本质都是一样的，就是由 HTML 代码构成的纯文本文件。二 HTML ---->英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页，给网页内容进行排版和布局的。 1. 超文本，也即超越纯文本，这意味着 ...
复制链接

扫一扫