HTML介绍
目录
HTML代码特点
注释标签
标题标签
段落标签
换行标签:br
格式化标签
图片标签:img
超链接标签:a
表格标签
列表标签
input标签
无语义标签
HTML代码特点
通过这段代码来研究一下HTML代码的特点:
1.html代码是通过标签来组织的.
形如 用尖括号组织,成对出现的这个东西叫做:标签"(tag),也可以叫做"元素" (element).
2.一个标签通常是成对出现的.
开始标签 结束标签,这两个标签之间是标签的内容.
3.标签是可以嵌套的.
一个标签的内容可以是其他一个或者多个标签,此时这些标签就构成了一个"树形结构"
4.可以在开始标签中,给标签赋予属性(Attribute).
属性相当于是键值对,可以有一个或者多个.
html 是一个html文件最顶层的标签,树根节点.
head 存放了这个页面的一些属性.
body 存放了这个页面包含哪些内容.
快速生成一个基本页面:输入!,按下tab.
此时我们只需要编辑body的内容即可.
注释标签
注释的内容不会在页面中显示.
但是如果右键查看网页源代码,是可以看到注释的.
vscode里,使用ctrl+/ 可以快速注释代码.
标题标签
h1-h6
每个标签内容都是独占一行的,这个独占一行是和代码的编写无关的!
在html里标签是否换行,和代码的编写无关,而是和标签自身有关(有点标签独占一行,有的标签不独占),在html源代码中写的换行会被省略,写的空格,多个空格也会被视为一个.
段落标签
P标签
lorem的作用是自动生成一段随机的文本.帮助我们调试显示效果.
每个段落之间,不光是要换行,还有一个明显的段落间距.
换行标签:br
格式化标签
变粗,倾斜,删除线,下划线
这些标签都是不独占一行的.
图片标签:img
img有一个核心属性:src(必填项)
src描述了该图片的路径(路径可以是一个本地的绝对路径,,也可以是一个相对路径,还可以是网络路径 ).
绝对路径
相对路径
一定要明确当前的工作目录是哪个,html的工作目录就是该html文件所在目录.
./可以省略.
网络路径:直接写个网址.
img别的属性:在图片挂了的时候,就会显示alt对应的文本.
title属性:鼠标悬停在图片上,会给出一个提示.
width/height:描述图的尺寸,宽度和高度可以同时设置,也可以只设置一个,如果只设置一个, 另一个会等比例缩放.
超链接标签:a
"链接" link(快捷方式)
"超" 链接跳转的页面,可以是在当前网站之外的.
还有一个属性target,一般是写作 target="_blank" 这样就可以打开一个新标签页而不会替换原有页面.
其中的URL也可以替换成IP地址.
表格标签
table 表示整个表格
tr 表示一行
td 表示一个单元格
th 表示表头中的一个单元格
th标签会自动加粗.
列表标签
有序列表 ol (ordered list)
无序列表 ul (unordered list)
列表项 li (list item)
input标签
input有很多标签,能够表现成各种用户用来输入的组件.
1.单行文本行
2.专门输入密码的单行文本框
3. 单选框
对于单选框,需要加个name属性,name属性相同的单选框,值之间是互斥的.
checked则是默认选择哪一个.
4.复选框
也可以使用checked属性来选择默认.
5.按钮
点击按钮之后要干什么,需要通过js来配合.
6.提交按钮(搭配form标签使用)
外表和button差不多,会触发form标签和服务器交互.
7.文件选择框
select下拉菜单
texttarea多行编辑框
无语义标签
没有特定含义,可以使用在任何场景.
div 默认是独占一行 块级元素
span 默认是不独占一行 行内元素