前端自学——html笔记

刘下来会留下来

已于 2022-05-12 20:27:00 修改

阅读量157

点赞数 1

文章标签： html 前端 css

于 2022-05-12 15:31:35 首次发布

本文链接：https://blog.csdn.net/weixin_46831132/article/details/124491097

版权

HTML入门笔记

前言
一、HTML初识
二、HTML常用标签

前言

HTML是超文本标记语言(Hyper Text Markup Language)。
超文本是指它可以添加图片、声音、动画等内容（超越文本限制）；其次还可以从一个文件跳转到另外一个文件，与世界各地主机文件连接（超级链接文本）

HTML基本框架：

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

    </body>
</html>

一、HTML初识

HTML元素标签分类：
· 常规元素（双标签）：<标签名> 内容 </标签名>
· 空元素（单标签）：<标签名/>或<标签名>
HTML标签关系
· 嵌套关系父子级包含关系
· 并列关系兄弟级并列关系
· 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位（一个tab是4个空格）。如果是并列关系，最好上下对齐。


<!-- 文档类型<!DOCTYPE>:用来说明你用的XHTML或者HTML是什么版本。
    <!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。 -->
<!DOCTYPE html>
<!-- lang指定该html标签内容所用的语言.
    en 定义语言为英语 zh-CN定义语言为中文  -->
<html lang="en">   
<head>
    <!-- 「字符集」(Character set)是多个字符的集合,
        计算机要准确的处理各种字符集文字，
        需要进行字符编码，以便计算机能够识别和存储各种文字。
        UTF-8是目前最常用的字符集编码方式。
        让 html 文件是以 UTF-8 编码保存的， 
        浏览器根据编码去解码对应的html内容。 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML初识</title>
</head>
<body>
    
</body>
</html>

二、HTML常用标签

1.排版标签

标题标签h：(h1~h6) 从小到大、一行显示
段落标签p：可以把 HTML 文档分割为若干段落，会根据浏览器的大小实现自动换行
水平线标签hr
换行标签br
div和span标签：是没有语义的,是我们网页布局最主要的2个盒子。

2.文字标签

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

3.标签属性（行内式）

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<刘宇宁 年龄="32岁" 性别="男"> 大家好，我是摩登兄弟刘宇宁…… </刘宇宁>

4.图像标记

   <!-- 图像标签：src是必须写的属性 -->
	<img src=”图像的url” />

图像标签的其他属性
Height、width一般只需要修改一个，另外一个会等比例自动缩放。
Border属性在html5中不支持。

5.超链接标签

    <!-- （1）外部链接： target：用于指定链接页面的打开方式，
                        其取值有_self和_blank两种，
                        其中_self为默认值，_blank为在新窗口中打开方式。-->
    <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

   
    <!-- （2）内部链接： -->
    <a href="首页页面.html">首页</a>

    <!-- （3）空链接#：用于暂时还没有确定的链接目标时 -->
    <a href="#">首页</a>  
    
    <!-- （4）下载链接：地址链接是.exe或者是.zip等压缩包形式 -->
    <a href="**.zip">下载文件</a>

6.锚点链接

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：
①　第一步：在链接文本的href属性中添加值为#名字的形式，如<a href="#two">个人生活</a>  	
②　第二步：找到目标位置标签，里面添加一个id的属性=刚才的名字，如<h3 id="two">第2集介绍</h3>

7.注释标签

 <!-- 注释语句 -->     
  快捷键是：    ctrl + /       
  或者 ctrl +shift + /

8.表格标签

<table>
	<caption>这里是表格的标题</caption>
	<tr>	<!-- tr用于定义表格中的一行 --> 
		<td>单元格内的文字1</td>
		<td>单元格内的文字2</td>
	</tr>
</table>

表格属性

合并单元格

（1）跨行合并（纵向）rowspan=“合并单元格的个数”
（2）跨列合并（横向）colspan=“合并单元格的个数”
（3）写合并代码：目标单元格
	a.跨行，最上侧单元格为目标单元格，写合并代码
	b.跨列，最左侧单元格为目标单元格，写合并代码
（4）步骤：
	①　先确定是跨行还是跨列
	②　找到目标单元格，写上合并方式=合并的单元格数量，比如<td colspan=”2”></td>
	③　删除多余的单元格的代码

表格划分结构

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注，这样更好的分清表格结构。

注意：
1.：用于定义表格的头部。用来放标题之类的东西。内部必须拥有标签！

：用于定义表格的主体。放数据本体。
放表格的脚注之类。
以上标签都是放到table标签中。

9.列表标签

（1）无序列表：各个列表项之间没有顺序级别之分，是并列的。

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

注意：
·<ul></ul>中只能嵌套<li></li>,直接在<ul></ul>中输入其他标签或文字的做法是不被允许的。
·<li>与</li>之间相当于一个容器，可以容纳所有元素。
·无序列表会带有自己的样式属性，但在实际使用时，我们会使用css来设置。

（2）有序列表：

 <!-- 不添加type属性时，有序列表默认从数字1开始排序 --> 
<ol type="A"> 
  <li>列表项1</li>
  <li>列表二</li>
  <li>列表三</li>
</ol>

注意：
·<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>中输入其他标签或文字的做法是不被允许的。
·<li>与</li>之间相当于一个容器，可以容纳所有元素。
·有序列表会带有自己的样式属性，但在实际使用时，我们会使用css来设置。
·<ol reversed="reversed">中的reversed属性能够让有序列表中的序列倒序排列。
·<ol start="3">中的start属性值为3，有序列表中的第一个序列号将从3开始排列。

（3）自定义列表：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

10.表单标签

（1）表单的组成：表单控件（表单元素）、提示信息、表单域
在这里插入图片描述
（2）表单域：是指包含表单元素的区域。
· 收集到的用户信息通过form表单域传递给服务器

    <!-- 定义一个表单域 -->
   <form action="url地址" method="提交方式" name="表单域名称">
        这里写入各种表单元素控件
   </form>
   注意：
   action用来指定接收并处理表单数据的服务器程序的url地址
   method用来设置表单数据的提交方式，其取值为get或post
   name用来指定表单的名称，以区分同一个页面中多个表单域
	
补充： GET 和 POST 的区别：

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求大小一般是(1024字节)，http协议并没有限制，而与服务器，操作系统有关，POST理论上来说没有大小限制，http协议规范也没有进行大小限制，但实际上post所能传递的数据量根据取决于服务器的设置和内存大小。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

（3）表单控件（表单元素）：是允许用户在表单中输入或者选择的内容控件。
①　input输入表单元素：用于收集用户信息

 <!-- 定义input输入表单元素 -->
   <input  type="属性值"  name="（自定义）当前input表单的名字"  value="页面默认显示的文字等" >
    <br> <!--换行 -->

· label标签：label标签为input元素定义标注。
作用：用于绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点，增加用户体验
里的for属性要与相关元素的id属性相同

<!-- 下面定义带label标签的input元素 -->
第一种方法：
<label for="text">用户名：</label>
<input type="text" id="text"  >
第二种方法：
<label>
用户名：<input type="text" id="text">
</label>
<!-- 两种方法的实现效果是，当用户点击“用户名”三个字时，鼠标光标就会定位到后面的输入框 -->

·其他的input属性↓：
在这里插入图片描述
· radio、checkbox如果是同一组，必须命名相同的name值

input属性的使用：代码示例：

效果如图：

②　select下拉表单元素：节省网页空间
在option 中定义selected =" selected "时，当前项即为默认选中项。
我们实际开发会用的比较少
在这里插入图片描述
③　textarea文本域元素：通过textarea控件可以轻松地创建多行文本输入框，用于用户输入内容较多的情况下

ps：文本框和文本域区别：
·· 文本框input type=“text”，只能显示一行文本；单标签，通过value显示默认值；用于用户名、昵称、密码等。
·· 文本域textarea，可以显示多行文本；双标签，默认值写到标签中间；用于留言板。