前端学习HTML

最新推荐文章于 2023-07-09 20:25:08 发布

springxing星

最新推荐文章于 2023-07-09 20:25:08 发布

阅读量150

点赞数 1

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

本文链接：https://blog.csdn.net/qq_60154877/article/details/125487122

版权

前端学习同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

8 篇文章 0 订阅

订阅专栏

每日一句正能量！

只要持续地努力，不懈地奋斗，就没有征服不了的东西。（作者：契诃夫）

今天讲一讲前端中的html中的内容，内容较多，请耐心看完。

sublime编辑器

常用快捷键：

注释单行 ctrl+/

注释多行 ctrl+shift+/

撤销 ctrl+z

恢复撤销 ctrl+y

打开底部搜索框，查找关键字 ctrl+f

底部搜索框，替换 ctrl+h

折叠代码 ctrl+shift+[

展开代码 ctrl+shift+]

保存 ctrl+s

向右缩进 table

向左缩进 shift+table

分屏 alt+shift+123456

二.主流浏览器

五个主流浏览器：IE,火狐，谷歌，苹果（safari），欧朋（opera）（有自己的内核）

三.前端界面三层

1.结构层（html）2.表现层（css）3.行为层（js）三层分离

四.HTML定义

HTML是超文本标记语言

五、HTML骨架标签（19行，默写）

<!DOCTYPE html>
1
<html>
    1
    1
    <head>
        1
        <title>标题</title>
        1
        <meta charset="utf=8">
    </head>
    2
    3
    <body>
        <p>段落</p>
    </body>
    4
    5
</html>

六、语义化

合适的地方放合适的标签（双合适）

七、标签的分类（）

7.1有无结束：单双（单标签或双标签）

按照标签有无结束标签：分为单标签，双标签

(meta,br,img,input,source...)
<img scr="images/xxx.png">
<meta charset="utf-8">
<input type="text" name="123">

7.2、有无语义

按照标签有无语义：分为有语义的，无语义的

无语义的：div,span

7.3、显示方式

按照标签的显示方式：分为块级标签，行内标签,行内块级标签

块级：独占整行，宽高生效（html,body,div...）

行内:和行内，行块可同行显示，设置的宽高不生效，按内容的多少显示宽高（span,em,i,strong...）

行块:和行内，行块可同行显示，宽高生效，按内容的多少显示宽高（img,input...）

八、标签的相互关系

关系两种：嵌套（父子），平级（兄弟，有共同的父级）

九、常用的标签

标签	含义	分类	注意要点
h1-h6	标题	块级标签，双标签	加粗，逐渐变小
p	段落	块级标签，双标签	不能嵌套块级标签
br	换行	单标签
hr	水平线	块级元素，单标签	主题结束
div	无语义	块级标签，双标签	布局
span	无语义	行内标签，双标签	包文字
img	插入图片	行块标签，单标签	属性src,alt,width,height
a	超链接	行内标签，双标签	属性，href放路径，a里面可以套文字或图片
pre	保留格式	块级标签，双标签	保留格式

2.文本格式化标签：

b,strong是加粗**

i,em是斜体

s,del是删除线

u,ins是下划线

都是行内，双标签，包文字

3.特殊字符

十、路径

路径分为相对路径和绝对路径。

相对路径是在文件附近的

<img src="../images/1.png" alt="这是一个图片" width="200px" height="100px">

src是必须要写的属性

绝对路径是直接的链接

例如点我跳到百度

十一、表格

11.1html的三个表

表格（table）：展示数据

列表：布局

表单：收集用户信息

11.2表格的写法

table表格双标签块级标签

caption 表格标题双标签块级标签

tr 行双标签块级标签

th 表头单元格双标签行块（加粗居中）

td 普通单元格双标签行块

11.3表格的内部细节

colspan 跨列（合并横着的）

rowspan 跨行（合并竖着的）

两个都是写在th或者td里面

同一行跨列，不同行跨行

<th colspan="3">****</th>

cellspacing=“0px” 单元格间距

cellpadding=“40px” 字体间距（这两个用的少）

table,tr,td一般只给table设宽高，tr,td自动分配空间

给table加border-collapse:collapse合并边框

table里面加border=“1”添加实线

大致内容就是这些啦，只要熟练掌握这些，打好基础，对后面的学习还是十分有帮助的，关注我，每日一篇前/后端学习内容。