html------------------------CSDN博客

本文链接：https://blog.csdn.net/qq_56514785/article/details/120200078

本文详细介绍了HTML的基础知识，包括HTML的结构、表现和行为三个方面，以及网页的构成元素如图片、链接、文本样式等。同时，阐述了Web标准的重要性，如促进跨平台兼容、提升用户体验等，并提及了浏览器内核和常见的浏览器类型。此外，还讲解了表单元素的使用，如文本框、密码框、单选按钮、复选框等，以及如何通过表单提交信息。最后，提到了标签的作用，用于提高表单的可操作性和用户体验。

摘要由CSDN通过智能技术生成

网页是图片、链接、文字、声音、视频等元素组成, 其实就是一个html文件(后缀名为html)
网页生成制作: 有前端人员书写 HTML 文件, 然后浏览器打开,就能看到了网页.
HTML: 超文本标记语言, 用来制作网页的一门语言. 有标签组成的. 比如 图片标签 链接标签 视频标签等…


常用的浏览器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。
平时称为五大浏览器。
浏览器内核（渲染引擎）： 负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。


Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
为什么需要 Web 标准
遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：
1. 让 Web 的发展前景更广阔。
2. 内容能被更广泛的设备访问。
3. 更容易被搜寻引擎搜索。
4. 降低网站流量费用。
5. 使网站更易于维护。
6. 提高页面浏览速度。

Web 标准的构成
主要包括结构（Structure） 、表现（Presentation）和行为（Behavior）三个方面。
简单理解： 结构写到 HTML 文件中， 表现写到 CSS 文件中， 行为写到 JavaScript 文件中

2. <!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
3. <html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
4. <meta charset=“ UTF-8” /> 必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.具体原理后面分析.


<p> 我是一个段落标签 </p>    段落和段落之间保有空隙
<br />                      换行标签 是个单标签，没有缝隙
<strong>加粗</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>
<div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
<span> 标签用来布局，一行上可以多个 <span>。小盒子
<img src="图像URL" />
&nbsp；  空格
$lt;  <
$gt;  >


2.链接分类：
1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
3. 空链接: 如果当时没有确定链接目标时，< a href="#"> 首页 </a > 。
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置. 
4.9 超链接标签 (重点）
 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如<a href="#two"> 第2集 </a>
 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：<h3 id="two">第2集介绍</h3>


<form> 会把它范围内的表单元素信息提交给服务器. 表单域是一个包含表单元素的区域。
<form action="xxx.php" method="get">
    <!-- text 文本框 用户可以里面输入任何文字 -->
    用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 

    <!-- password 密码框 用户看不见输入的密码 -->
    密码: <input type="password" name="pwd" >  <br> 

    <!-- radio 单选按钮  可以实现多选一 -->
    <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
    <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
    性别: 
    男       <input type="radio" name="sex" value="男"> 
    女       <input type="radio" name="sex" value="女" checked="checked"> 
    人妖     <input type="radio" name="sex" value="人妖">   <br> 
    
    <!-- checkbox 复选框  可以实现多选 -->
    爱好: 
吃饭 <input type="checkbox" name="hobby" value="吃饭"> 
睡觉 <input type="checkbox" name="hobby">  
打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
    <br> 

    <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
    <input type="submit" value="免费注册">

    <!-- 重置按钮可以还原表单元素初始的默认状态 -->
    <input type="reset" value="重新填写">

    <!-- 普通按钮 button  后期结合js 搭配使用-->
    <input type="button" value="获取短信验证码"> <br>

    <!-- 文件域 使用场景 上传文件使用的 -->
    上传头像:  <input type="file" >
</form>


<label> 标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者
选择对应的表单元素上,用来增加用户体验.
语法： 
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同

<label for="text"> 用户名:</label> <input type="text" id="text" >
   <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
   <input type="radio" id="nv"  name="sex"> <label for="nv">女</label>

select下拉菜单 selected="selected"默认选中
<form>
    籍贯: 
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
    </select>
</form>