HTML 基础

最新推荐文章于 2024-04-25 21:52:00 发布

IGWBGtheshy

最新推荐文章于 2024-04-25 21:52:00 发布

阅读量652

点赞数 2

文章标签： html 前端开发语言

本文链接：https://blog.csdn.net/igwbgtheshy/article/details/124969639

版权

1.HTML结构

1.1 认识 HTML 标签

HTML 代码是由"标签"构成的.

形如: <body>hello</body>

标签名(body) 放在 <> 中.
大部分标签成对出现, <body> 为开始标签,</body>为结束标签.
开始标签和结束标签之间,写的是标签的内容. (hello)
少数标签只有开始标签,称为"单标签".
开始标签中可能会带有"属性". 在HTML中,不同的标签可能会支持不同的属性,但是所有的标签都支持 id 属性, id 属性的含义就表示这个标签的唯一身份标识(同一个HTML里面不能有两个id相同的标签).
在HTML中, 对于这样的标签(tag),还有另外一种叫法 : 元素(element).

1.2 HTML 文件基本结构

<html>
        <head>
                <title>第一个页面</title>
        </head>
        <body>
                hello world
        </body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.

1.3 标签层次结构

父子关系
兄弟关系

其中:

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签. head 是 title 的父标签.
head 和 body 之间是兄弟关系.

标签之间的结构关系, 构成了一个 DOM 树.

DOM 是 Document Object Mode (文档对象模型) 的缩写.

2. HTML常见标签

2.1 注释标签

注释不会显示在界面上. 目的是提高代码的可读性.

ctrl + / 快捷键可以快速进行注释/取消注释.

2.2 标题标签 :h1 - h6

有六个, 从 h1 - h6. 数字越大, 则字体越小

2.3 段落标签 : p

p 标签表示一个段落

注意:

p 标签之间存在一个空隙.
当前的 p 标签描述的段落, 前面还没有缩进.
自动根据浏览器宽度来决定排版.
html 内容首尾处的换行, 空格均无效.
在 html 中文字之间输入的多个空格只相当于一个空格.
html 中直接输入换行不会真的换行, 而是相当于一个空格.

2.4 换行标签: br

br 是一个单标签(不需要结束标签).
br 标签不像 p 标签那样带有一个很大的空隙.
<br/> 是规范写法. 不建议写成 <br>.

展示结果:

2.5 格式化标签

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
~~删除线~~: del 标签和 s 标签
下划线: ins 标签和 u 标签

展示结果:

2.6 图片标签:img

img 标签必须带有 src 属性. 表示图片的路径.

如图,此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中.

img 标签的其他属性:

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
title: 提示文本. 鼠标放到图片上, 就会有提示.
width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

注意:

属性可以有多个, 不能写到标签之前
属性之间用空格分割, 可以是多个空格, 也可以是换行.
属性之间不分先后顺序.
属性使用 "键值对" 的格式来表示.

2.7 超链接标签: a

href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.
标签的内容也很重要,要是没有内容,默认情况下 a标签的尺寸就是0*0,也就无法点击了.

展示效果:

a标签这里的链接地址,可以有多种不同的写法.

直接写一个完整的 url(外部网站).
也可以写一个相对路径(本地的内容).
写作 # , 表示不跳转

2.8 表格标签

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
tbody: 表格得到主体区域.

table 包含 tr , tr 包含 td 或者 th.

展示结果:

可以看到,默认的 table标签是比较丑的,所以可以给table标签加上一些属性,来让这个东西更像一个表格.

align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素
width / height: 设置尺寸.

示例:给 table 加上这些属性:

展示结果:

2.9 列表标签

主要是用来布局的. 整齐好看.

无序列表[重要]: ul(整个无序列表) li(列表项,一个列表中可以包含多个表项) .
有序列表[用的不多]: ol(整个有序列表) li(列表项,一个列表中可以包含多个表项) .
自定义列表[重要]: dl (整个列表) dt (小标题) dd (标题里的内容).

注意:

元素之间是并列关系
ul/ol 中只能放 li 不能放其他标签, dl 中只能放 dt 和 dd
li 中可以放其他标签.
列表带有自己的样式, 可以使用 CSS 来修改. (例如前面的小圆点都会去掉)

展示结果:

2.10 表单标签

表单是让用户输入信息的重要途径.

表单标签是好几个标签,统称为表单.

form标签. 表示整个表单
input标签. 能够表示一些具体的输入控件,比如:输入框,提交按钮,上传文件按钮....
select标签.
label标签.
textarea标签.
.......

2.10.1 form标签

form标签表示整个表单,其他的表单标签都要放到 form中使用.

其中 action属性所填内容就表示用户具体输入的数据最终要交给谁(哪个服务器),需要填一个具体的url (服务器的地址).

2.10.2 input标签

各种输入控件,单行文本框,按钮,单选框,复选框.

type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于单选按钮, 具有相同的 name 才能多选一.
value: input 中的默认值
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.

2.10.3 label标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)

2.10.4 select标签

表示下拉菜单

select 是标识下拉框本身, 里面的选项是一个一个的option标签.

option 中定义 selected="selected" 表示默认选中哪个选项(图中选中上海).

如果没有指定,默认选中第一项( 图中选中北京).

2.10.5 textarea标签

多行编辑框.

cols属性: 规定文本区域内可见的宽度.
rows属性: 规定文本区域内可见的行数.

2.11 无语义标签

上面所介绍的标签,都是带有语义的标签(语义指的就是这个标签是用来干嘛的). 例如:h1是一级标题,p是段落,a表示超链接....

而 div 和 span 就是无语义标签(无语义标签啥都可以用来干,没有专门的用途).
div和span往往是用来针对网页结构进行布局的.
div可以视为是一个独占一行的"大盒子".
span可以视为是一个不独占一行的"小盒子".