「学习笔记」HTML基础

最新推荐文章于 2024-06-14 11:01:38 发布

YYuHhhh

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量221

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/PaulGeorgeDDD/article/details/125693006

版权

一、HTML定义

HTML初识

「HTML」(Hyper Text Markup Language):超文本标记语言

「所谓超文本，有2层含义：」

1、它可以加入图片、声音、动画、多媒体等内容（超越文本限制）
2、它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

「HTML整体骨架形式」

<!-- 页面中最大的标签 根标签 -->
<html>
    <!-- 头部标签 -->
    <head>     
        <!-- 标题标签 -->
        <title></title> 
    </head>
    <!-- 文档的主体 -->
    <body>
    </body>
</html>

「HTML元素标签分类」

常规元素(双标签)
空元素(单标签)

  <!-- 常规元素(双标签) -->
  <标签名> 标签内容 </标签名>   比如<body>文字内容</body>
  
  <!-- 空元素(单标签) -->
  <标签名 />  比如 <br />或<br>

「HTML标签关系」

嵌套关系父子级包含关系
- 子元素最好缩进一个tab键的身位用于更好的区分它们之间对应的父子关系
并列关系兄弟级并列关系
- 并列关系，两个元素之间最好上下对齐。

文档类型

「文档类型」 用来说明你用的HTML是什么版本。告诉浏览器按照HTML5标准解析页面。

页面语言lang

lang用于指定该html标签内容所用的语言

<!-- en 定义语言为英语 zh-CN定义语言为中文 -->  
<html lang="zh-CN">

「lang的作用」

根据根据lang属性来设定不同语言的css样式，或者字体
告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别

字符集

「字符集」(Character set)是多个字符的集合,计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

UTF-8是目前最常用的字符集编码方式
让 html 文件是以 UTF-8 编码保存的，浏览器根据编码去解码对应的html内容。

<meta charset="UTF-8" />

二、HTML常用标签

常用标签

「1. 排版标签」 主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

标题标签h(h1~h6)
段落标签p,可以把 HTML 文档分割为若干段落
水平线标签hr
换行标签br
div和span标签:是没有语义的,是我们网页布局最主要的2个盒子标签。

「2. 排版标签」

b和strong 文字以粗体显示
i和em 文字以斜体显示
s和del 文字以加删除线显示
u和ins 文字以加下划线显示

「3. 标签属性(行内式)」

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。

<标签名 属性名="属性值"> 内容 </标签名>

「4. 图像标签img」

属性	属性值	描述
src	URL	图片的路径
alt	文本	图片无法显示时替换的文本
title	文本	鼠标悬停时显示的内容
width	像素px	图像的宽度
height	像素px	图像的高度
border	数字	图像边框的粗细宽度

注意：

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
采取k-v键值对的格式 key=“value” 的格式

<img src="georgeDdd.jpg" width="200px" height="100px" border="3" title="乔治弟弟来了喔" />

「5. 链接标签」

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能
target	用于指定链接页面的打开方式，其取值有self和blank两种，其中self为本窗口打开，blank为在新窗口中打开方式。

src 和 href 的区别

总的来说:src 是引入资源的 href 是跳转url的

src是用于引用某一资源替换当前元素，用在img script iframe上，href用于在当前文档和引用资源之间确立联系，用在link和a上。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。如果我们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。

表格

「1. 表格」

现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理。

「2. 创建表格」

<table>
	<thead>
	...
	</thead>
	<tbody>
  		<tr>
    		<td>单元格内的文字</td>
 		</tr>
 		...
  	</tbody>
 	<tfoot>
 	...
  	</tfoot>
</table>

table、tr、td，他们是创建表格的基本标签，缺一不可

table用于定义一个表格标签。
tr标签用于定义表格中的行，必须嵌套在 table标签中。
td 用于定义表格中的单元格，必须嵌套在标签中。
字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。td像一个容器，可以容纳所有的元素。
thead：用于定义表格的头部。用来放标题之类的东西。内部必须拥有标签！
tbody：用于定义表格的主体。放数据本体。
tfoot：放表格的脚注之类。

<table>
   <caption>我是表格标题</caption>
</table>

「3. 合并单元格」,合并的顺序我们按照先上后下先左后右的顺序 ,合并完之后需要删除多余的单元格。

跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

列表

「列表ul」 容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。

列表最大的特点就是整齐、整洁、有序，跟表格类似，但是它可组合自由度会更高。

「1. 无序列表 ul」

中只能嵌套
，直接在
标签中输入其他标签或者文字的做法是不被允许的。
与
之间相当于一个容器，可以容纳所有元素。

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

「2. 有序列表 ol」

1. 标签中的type属性值为排序的序列号，不添加type属性时，有序列表默认从数字1开始排序。
常用的type属性值分别为是1，a，A，i，I
1. 中的reversed属性能够让有序列表中的序列倒序排列。
1. 中的start属性值为3，有序列表中的第一个序列号将从3开始排列。

<ol type="A"> 
  <li>列表项1</li>
  <li>列表二</li>
  <li>列表三</li>
</ol>

表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。
表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：
它相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

「1. input 控件」

<input type="属性类型" value="属性值">

input 输入的意思
标签为单标签
type属性设置不同的属性值用来指定不同的控件类型
除了type属性还有别的属性

例如

用户名: <input type="text" name="username" /> 
密  码：<input type="password" name="password" />

value属性

value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

用户名:<input type="text"  name="username" value="请输入用户名">

name属性

name表单的名字，这样，后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是用于区别不同的表单。
- name属性后面的值，是我们自己定义的。
- 在radio单选按钮中，如果是同一组单选按钮，我们必须给他们命名相同的那么，用于限定单选的范围。

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

checked属性

表示默认选中状态。较常见于单选按钮和复选按钮。

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

input 属性小结

属性	说明	作用
type	表单类型	用来指定不同的控件类型
value	表单值	表单里面默认显示的文本
name	表单名字	页面中的表单很多，name主要作用就是用于区别不同的表单。
checked	默认选中	表示那个单选或者复选按钮一开始就被选中了

「2. label标签」

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

如何绑定元素呢

第一种用法就是用label标签直接包含input表单，适合单个表单选择
第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。

  第一种
  <label> 用户名： 
    <input type="radio" name="usename" value="请输入用户名">   
  </label>
  
  第二种
  <label for="sex">男</label>
  <input type="radio" name="sex"  id="sex">

「3. textarea控件(文本域)」

通过textarea控件可以轻松地创建多行文本输入框.
cols=“每行中的字符数” rows=“显示的行数”

  <textarea >
    文本内容
  </textarea>

「4. select下拉列表」

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表。
在option 中定义selected =" selected "时，当前项即为默认选中项。

<select>
  
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

表单域

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

每个表单都应该有自己表单域。

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	表单提交方式	用于设置表单数据的提交方式。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。