HTML入门标签整理，入门有它就够了

最新推荐文章于 2023-08-20 11:26:25 发布

RaoDuty

最新推荐文章于 2023-08-20 11:26:25 发布

阅读量140

点赞数

分类专栏： HTML JavaWab 文章标签： html

本文链接：https://blog.csdn.net/qq_42724864/article/details/104581396

版权

JavaWab 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

最近学习完了Java的基础部分。按照自己的学习路线应该学习Java wab了。

相对于Java来说，HTML学习想多简单很多。那么总结一下最近学习的简单标签，和HTML初始代码解读

HTML初始代码解读：

每一个html 文件都需要添加的初始代码，无论什么样的网页，这些代码都是要有的,要符合html文件的规范写法
!+tab键 : 快速的创建html的初始代码


<!DOCTYPE html>  //文档声明：告诉浏览器这个是一个html文件
<html lang="en"> //html文件最外层标签，包裹着所有html标签代码，lang=en 表示英文的网址；lang="zh-CN"表示中文文件
<head>
    <meta charset="UTF-8">  //原信息，UTF-8是编写网页中的辅助信息，让每个国家的语言都可以在页面中展现，不会出现乱码
    <title>Document</title> // 例如淘宝网的最上面，淘我喜欢
</head>
//headt头部  输入网址的部分

//正常的网页是body
<body>
    显示网页内容的区域
</body>
</html>

1.HTML 注释？
写法：
快捷键：1.ctrl +/
2.shift+alt+a

2.html语义化：
所谓html语义化是，根据网页中的内容的结构，选择合适的html标签进行编写

好处：
1.在没有CSS的情况下，页面也能呈现出很好的结构。
2.有利于SEO,让搜索引擎爬虫更好的理解网页
3.方便其他设备解析（如屏幕阅读器，盲人阅读器等）
4.便于团队开发和维护

3.标题与段落
标题->双标签：<h1></h1> ...... <h6></h6>
在一个网页中，h1标题最重要，并且一个。html文件中只能出现一次h1标签
h标签：实现标题
h5,h6标签在网页中不经常使用
段落->双标签：<p></p>
p标签：实现段落

4.文本修饰标签
强调-> 双标签：<strong></strong>:加粗
<em></em>:斜体
上标：<sup></sup> 如x的平方 <p>x<sup>2</sup></p>
下标：<sub></sub> 如水分子 <p>H<sub>2</sub>O</p>

删除文本：<del></del>
插入文本：<ins></ins>
注意：一般情况下删除和插入文本配合使用如：原价300打折后200

原价<del>300</del>现价<ins>200</ins></p>

5.图片标签？
img—> 单标签
src：引入图片的地址
alt:当图片出现问题的时候，可以显示一段友好的提示文字
title:提示信息
width：宽度
height：高度

6.引入文件的地址路径
相对路径：相对于当前路径用来引用
. /在路径中表示当前路径
../在路径中表示上一级路径
绝对路径：就是文件的地址
可以是电脑中的地址（可以不用写盘）
也开业是网络中文件的链接

7.跳转链接标签

 <a>->双标签：<a></a>

href属性：链接的地址
target属性：可以改变链接打开的方式，默认情况下：在当前页面打开_self 新窗口打开_blank
base->单标签：作用是改变链接的默认行为的

8.跳转锚点
是方便在页面内进行跳转：如点击文字的大纲，调转到对应的标题

实现方法一
#号+id属性 (常用) 例：<a href="#html">HTML</a> 则跳转部分为：<h2 id="html">HTML超文本标记性语言</h2>
实现方法二
#号+name

16.特殊符号
编写一些文本时，经常会遇见输入法无法输入的字符，如注册商标，版权符等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码

特殊字符的一般格式：#+字符；
为了解决多个空格无法显示的问题，以及大于小于符号与< >的区分

空格符  &nbsp；
版权    &copy；
注册商标 &reg；
小于号  &lt；   
大于号  &gt；
&和号   &amp；
人命币  &yen；
摄氏度  &deg；

17.列表标签：
1.无序列表
<ul>,<li>:列表的最外层容器，列表项
注：ul和li必须是组合出现的，他们之间是不能有其他标签的<li>之间可以出现其他标签
type属性：改变前面标记的样式（一般都是用CSS去控制）
（w3school见标签的属性）
例如：

一季度财政收入同步增长6.2%；中国经济开局平稳
一季度财政收入同步增长6.2%；中国经济开局平稳>

2.有序列表
<ol>,<li>:列表的最外层容器，列表项
注：ol和li必须是组合出现的，他们之间是不能有其他标签的

之间可以出现其他标签一般用的比较少，可以用无序列表来实现
type属性：改变前面标记的样式（一般都是用CSS去控制）所以一般都会把前面的序号删除掉再用CSS编写
（w3school见标签的属性）
例如：

 <ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    </ol>

3.定义列表（列表项需要添加标题和对标题进行描述的内容）
<dl> ：定义列表
<dt> ：定义专业术语或名字（列表第一项）
<dd> : 对名字进行解释和描述（列表第二项）

例如：

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
    <dt>JavaScript</dt>
    <dd>网页脚本语言</dd>
</dl>

RaoDuty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML入门标签整理，入门有它就够了

最近学习完了Java的基础部分。按照自己的学习路线应该学习Java wab了。相对于Java来说，HTML学习想多简单很多。那么总结一下最近学习的简单标签，和HTML初始代码解读HTML初始代码解读：每一个html 文件都需要添加的初始代码，无论什么样的网页，这些代码都是要有的,要符合html文件的规范写法 !+tab键 : 快速的创建html的初始代码<!DOCTYPE...
复制链接

扫一扫