速成HTML-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_78349581/article/details/134406525

在这里插入图片描述

HTML是什么？

HTML是Hyper Text Markup Language，超文本标记语言
HTML并不是一门编程语言，编程语言的关键是逻辑，例如有条件选择-> 如果xxx则yyy
HTML是用来构建网页元素的标记语言，例如文本段落、表格、图片等
编程语言如Javascript，用于编写页面逻辑、调用接口、操作数据库等
在做web开发时，HTML是最基础和最必须要了解的、只使用HTML就可以构建简单的网页
HTML、CSS、JavaScript组成web开发的基石

Web开发，用我的世界举例

HTML：方块
CSS：方块的外观和布局
JavaScript：角色的行为动作以及红石效果

学习HTML的前置准备

学习HTML需要准备哪些条件？

浏览器：查看HTML的输出效果
编辑器：用来写代码

浏览器：

Google Chrome 极力推荐！
Firefox 网站默认静音，需要手动开启
Safari
MicroSoft Edge

不要用TE浏览器！！

编辑器：
记事本？可以但不建议，因为没有行标及代码高亮等
推荐使用VIsualStudioCode（VScode）和HBuilder X

第一个HTML文件

HTML不需要使用其他的环境和服务，可快速上手
只需要创建一个以.html为后缀的文件，就可以使用浏览器打开啦
.html为后缀的文件就是HTML文件，可以在本地运行调试

首页html文件一般是Iindex.html
如果在服务器部署了www.xxx.com，根域名将显示其index.html中的内容，“关于”页面将为xxx.com/about
当然，如果更改配置文件，上述内容也是可变的
实践：创建后缀名为.html的文件，写入Hello World，浏览器打开查看

HTML标签语法

HTML标签是最基本的网页固件单元，不同的标签会将信息和文本使用不同的格式展示
<tagname>content</tagname>
标签使用<>包裹起来，一般情况下标签是成对出现（起始标签和结束标签）,标签包裹着将要显示在网页上的内容
例如: 
  <h1>一个标题</h1>
	<p>一些内容...</p>

<tagname></tagname>
-> <tagname/>
-> <tagname> (HTML5规范中无需加上/)

当开始标签和结束标签中没有内容时,可以使用自闭和标签

一些天生就是自闭和的标签
  <br> <hr> <input>

HTML页面结构

<!--  不是标签  向浏览器声明文档为html5文档  -->
<!DOCTYPE html>
<!-- 整个网页的根标签 lang="en" 语言模式英文-->
<html lang="en">
  <!-- 整个网页头部标签：存放一些不用去显示到页面的数据 -->
  <head> <!-- head作用是定义一些标题、链接工程内的其他css文件或js文件，以及定义搜索引擎可以搜索到的网站描述或关键词等元数据 -->
    <!-- mata:  元数据标签，存放一些网页信息  charset="UTF-8" 编码格式u-f.. -->
    <meta charset="UTF-8">
    <!-- 视口  宽度=设备宽度  释放比 1.0  -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题 -->
    <title>look</title>

  </head>
  <!-- 网页主体：显示网站呈现的内容，如表格、文章、图片等 -->
  <body>
    
  </body>

</html>

注释与标题标签

<!DOCTYPE html>
<head>
  <title>网页标题</title>
</head>
<body>
<!--   注释 Ctrl+/ 注释的内容将被浏览器忽略 -->

<!--   标题标签 （默认情况下，浏览器会有一些核心样式供我们使用，所以h1标签会让文字变得更大，
  文字周围会使用一些空白填充，加入多个h标签会发现，会自动换行显示，这些默认样式可以通过CSS改变）-->
	<h1>Hello Wold 1</h1>
  <h2>Hello Wold 2</h2>
  <h3>Hello Wold 3</h3>
  <h4>Hello Wold 4</h4>
  <h5>Hello Wold 5</h5>
  <h6>Hello Wold 6</h6>
</body>

段落标签

<!DOCTYPE html>
<head>
  <title>网页标题</title>
</head>
<body>
<!--  段落标签 p标签是一个块级元素，显示多个段落时，可以看到新的段落会另起一行，在浏览器中打开开发者模式可以看到“用户代理样式表”，即为该标签的默认样式-->
  <p>
    紧跟市场需求、渐进式迭代，方向明确、路线清晰。深耕前端从0基础入门到精通系统学习教程，不走弯路，再小的帆也能远航。
		工作能力 ≠ 面试能力，面试之前刻意练习，强化训练。聚焦前端面试必考的刚需内容，掌握解决面试题的思路、技巧与方法论。
		从需求分析、原型图分析、数据库与接口设计、前端开发、后端开发、前后端联调、到全面上云，汇总项目真实场景中用到的技术、技能、技巧和解决方案。
  </p>
</body>

行级元素和块级元素

<!DOCTYPE html>
<head>
  <title>网页标题</title>
</head>
<body>
<!-- 行级元素 display：inline不会新起一行，在该行中，所占用的空间大小跟其本身内容有关 -->
<!--   span、img、a、strong、em等 -->
  
<!-- 块级元素 display：新起一行，占据该行的100%宽度 -->
<!--   div、h、p、from等 -->

<!--   strong 加粗
       em 斜体
       a 链接（通过指定href属性值达到网页跳转的效果，指定target=“_blank”可以在新标签页中打开该链接内容）
  -->
	<p>
    <strong>Welcome to the Java.</strong>com help center, where you can find solutions to 
    problems you're having downloading Java and using it <em>on your computer.</em>
    We keep track of the most frequently reported problems and <a>error codes</a> 
    and provide answers to these questions in this section.
  </p>
</body>

标签属性

所有的Html标签都可以有属性，且可以拥有不止一个属性，其作用是提供有关某个元素的更多信息，例如：
<a href="https://qq.com" target="_blank">Tencent</a>
href指定要跳转到的地址，target选择是否打开新标签页（虽然target不是必须的，但其也有自己的作用）

属性通常写在开始标签中，格式以键值对的形式出现
<tagname key="value">content</tagname>

列表和表格标签

<!-- 列表标签：无序列表（列表元素默认使用一部分空格填充，每一行开头使用黑点标记） -->
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ul>

<!-- 列表标签：有序列表（列表元素默认使用一部分空格填充，每一行开头自动添加序列） -->
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ol>

<!-- 表格标签table  表格内容分为表头thead和表体tbody，表格中有行tr和列th/td-->
<table>
  <thead>
    <th>Name</th>
    <th>E-mail</th>
    <th>Tal</th>
  </thead>
  <tbody>
    <tr>
      <td>Xiaoming</td>
      <td>1326@qq.com</td>
      <td>13108758920</td>
    </tr>
    <tr>
      <td>Anna</td>
      <td>1165@163.com</td>
      <td>13000032658</td>
    </tr>
  </tbody>
</table>

表单与输入标签

web开发常见登陆表单、注册表单等，HTML只能构建表单外观，实现其功能需要JavaScript
<!-- 表单 form （由于各种框架盛行，有更先进的表单数据提交处理方法，使用action显得较为落后，企业开发中也很少使用）-->
<from action="指定表单数据提交到哪里">
  <!--  输入框input 输入类型为文本输入，其他类型建议自行查阅W3School  -->
  <label>姓名：</label> <input type="text">
  <label>姓名：</label> <input type="text">
<!--  两个输入框被放置到了同一行，因为两者是行级元素，要区分成两行需要使用div将其转换为块级标签  -->
  <div><label>姓名：</label> <input type="text"></div>
	<br>	<!--  两个输入框之间的间距需要使用CSS进行调整，此处使用简单折行演示 -->
  <div><label>姓名：</label> <input type="text"></div>

	<!--  多行文本输入（文本域）  -->
  <div> <label>建议意见：</label> <textarea></textarea></div>

	<!--  下拉菜单 selected="selected"为预设值-->
  <div> 
    <label>性别：</label>
    <select>
      <option value="man">男</option>
      <option value="women">女</option>
      <option value="other" selected="selected">其它</option>
    </select>
  </div>

	<!--  复选框 -->
  <div>
    <label>爱好：</label>
    男<input type="checkbox" />
    女<input type="checkbox" />
  </div>

	<!-- 单选 checked为默认选项，两个选项具有同一个name分组-->
  <label>是否愿意加班：</label>
  <input type="radio" name="info" checked>不愿意
  <input type="radio" name="info" >愿意
  
</from>

按钮标签和图片标签

<!-- 按钮 button html只能构建按钮外观，实现功能需要JavaScript -->
<button>登录</button>
<input type="submit" value="Submit" />

<!-- 图片 img 块级元素 设置width后，height会成比例自动跟进，强制更改可能导致图片扭曲变形-->
<img src="图片路径" alt="因某些原因图片加载失败显示的内容（备选文本）" width="200" height="">