HTML

最新推荐文章于 2022-04-09 10:43:09 发布

jojo_8913

最新推荐文章于 2022-04-09 10:43:09 发布

阅读量472

点赞数 9

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_51774063/article/details/115015527

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

自2020.10开始学习前端知识，抽时间整理一下过去笔记，顺便备份方便自己复习。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种标记语言，而不是编程语言。

一、HTML标签基础

1.骨架标签

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>

标签名	定义	说明
html	HTML标签	页面中最大的标签，我们成为根标签
head	文档的头部	注意在head标签中我们必须要设置的标签是title
title	文档的标题	让页面拥有一个属于自己的网页标题
body	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

2.元素标签分类

1.双标签

<body></body>

2.单标签

<br/>

区别在于结束标签符号 "/ " 放置的位置不同，单标签的 “/ ” 有时也可以不加。

3.标签关系

1.嵌套关系

<ul>
	<li></li>
</ul>

2.并列关系

<li></li>
<li></li>

4.文档类型<!DOCTYPE>

下列代码为vscode按下 “ ！” 快速生成的代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Document</title>
</head>
<body>
    
</body>
</html>

其中文档类型HTML 声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

5.页面语言lang

<html lang="en">

指定该html标签内容所用的语言为中文

en定义语言为英语
zh-CN定义语言为中文

6. 字符集

<meta charset="UTF-8" />

规定html 文件是以 UTF-8 编码保存的，浏览器根据编码去解码对应的html内容。这是避免页面造成乱码的关键！

二、HTML常用标签

1、排版标签

排版标签初步搭建网页结构的标签，使用频率最高。

1）标题标签h

<h1>   标题文本   </h1>
<h2>   标题文本   </h2>
<h3>   标题文本   </h3>
<h4>   标题文本   </h4>
<h5>   标题文本   </h5>
<h6>   标题文本   </h6>

如下图：
标题标签

2）段落标签p

<p>文章内容</p>

绝大部分情况下会根据浏览器窗口的大小自动换行，自动调整与上下文的间距。

3）水平线标签hr

<h3>内容</h3>
<hr>
<h3>内容</h3>

如图：
hr作用

作用：将段落与段落直接隔开，使总体文章结构更加清晰明了。

4）换行标签br

使文本强制换行

<br/>

5）div标签和span标签

<div></div>
<span></span>

两者都是布局标签，装载的是页面元素，区别在于div一行只有一个，而span一行可以有多个。
可以理解为div 大盒子，span为小盒子。

2、标签属性

<标签 属性="属性值">

3、img标签

<img src="" alt="" title="" width="" height="">

属性	属性值	描述
src	URL地址	图像的路径
alt	文本	图片无法加载时显示的文字
title	文本	鼠标悬浮图片上时显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度

其中scr为必要属性，属性之间没有先后顺序，采取键值对的形式书写。

4、a链接标签

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

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

外部链接需要添加http:// 跳转
内部链接直接页面名字即可
a链接也可以绑定到图片，视频

5、注释标签

<!-- 注释语句 -->    
html文件中快捷键是：ctrl + /

// 注释语句
script区域的快捷键是：ctrl + /

/*  需要注释的内容  */
css文件注释

HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

三、路径

1.相对路径

当前文件的位置作为参考，相对与其他文件的路径。

路径分类	符号	说明
同一级路径		只需输入图像文件的名称即可，如<img src=“baidu.gif” />。
下一级路径	“/”	图像文件位于HTML文件同级文件夹下
上一级路径	“…/”	在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推

2.绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。

四、表格

常用于显示、展示表格式数据。
因为它可以让数据显示的非常的规整，可读性非常好。

<!-- 表格标签tr td -->
    <!-- cellspacing 单元格单元格之间的距离 -->
    <!-- cellpadding 字与单元格之间的距离 -->
    <table cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>西游记</td>
                <td><img src="images/ys.jpg" width="20"> </td>
                <td>100</td>
                <td>200</td>
                <td align="center">
                    <a href="http://www.baidu.com">贴吧</a>
                    <a href="http://www.baidu.com">打赏</a>
                    <a href="http://www.baidu.com">催更</a>
                </td>
            </tr>
            
        </tbody>
    </table>

五、列表标签

1.无序列表 ul

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

ul标签中只能放置li标签，其他标签应该要输入再li标签中。

2.有序列表 ol

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

特性和ul差不多，使用次数不是很多。

3.自定义列表 ul

常用于网站底部的服务描述中

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

如下图：
在这里插入图片描述

六、表单标签

作用：

表单通常由表单域、表单控件、提示信息组成。
目的是和用户产生交互，收集用户数据提交到后台中。

1.input控件

<!--  
    type属性    text 文本
                password 密码
                radio 单选
                checkbox 复选框
                button 普通按钮
                submit 提交按钮 
                reset 重置信息
                image 图像
                file 文件域
-->
<input type="表单的类型" value="控件中的值" name="此控件的名称" checked="默认选中与否 true/false">

2.label标签

目的是为了提高用户体验，快速选择控件
如下：

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

在这里插入图片描述

鼠标点击男字时就会自动为 radio单选选择上

3. textarea控件(文本域)

<textarea >
  文本内容
</textarea>

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

4. select下拉列表

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

在这里插入图片描述

5.form表单域

通过form表单收集的数据再通过get/post方法提交到对应的action 地址

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

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

jojo_8913

关注

9
点赞
踩
21

收藏

觉得还不错? 一键收藏
6
评论
HTML

自2020.10开始学习前端知识，抽时间整理一下过去笔记，顺便备份方便自己复习。学习目录一、HTML标签基础1.骨架标签2.元素标签分类3.标签关系4.文档类型5.页面语言lang6. 字符集二、HTML常用标签1、排版标签1）标题标签h2）段落标签p3）水平线标签hr4）换行标签br5）div标签和span标签2、标签属性3、img标签4、a链接标签5、注释标签三、路径1.相对路径2.绝对路径四、表格五、列表标签1.无序列表 ul2.有序列表 ol3.自定义列表 ul六、表单标签1.input控件2.
复制链接

扫一扫