MOOC web前端开发笔记(二)

HTML

HTML概述

HTML(HyperText MarkUp Language)
"超文本标记语言",以标签的形式规定网页结构,它是制作网页的标准语言
HTML不区分大小写

标签、元素与属性

1.由尖括号包围,比如<pre><title></pre>
2.通常是成对出现的,也可以单独出现。
标签要有正确的嵌套,如:
<pre><html><bodt></body><html></pre>
标签加上标签里的内容就变成了元素。如:
<title>hello,world</title>就是一个元素。
被嵌套的元素称为嵌套元素的子元素,反之可以说是父元素,同级元素是兄弟元素,如:

\  外层:父元素
   \ 内层:子元素
   \     同级:兄弟元素
   \ 内层:子元素	
   \
\

这些关系可以用一个树来表示,我们称为:HTML DOM树(Document Object Model)(文档对象模型)
标签中可以带有一些属性来描述这个标签,属性的顺序无关。

HTML的文件结构

第一行会有一个<!DOCTYPE html>表示文档类型符合html5标准
最外层有一堆html标签,表示文件的开始和结束,它的lang属性代表其是中文网页还是英文网页,提供给搜索引擎,内部第一个部分比较重要的一堆head标签,它表示的就是文件的头部信息,这是网页对浏览器和搜索引擎提供的信息。
内层标签body表示网页的主题内容,网页的主题内容会呈现在浏览器的主体部分。

\
\
\
   \
   \Document
\
\
\
\

HTML编辑器

记事本
Adobe DW
Sublime Text3
webstorm

html标签

html:代表文件的开始和结束,它的属性有lang,表示其为什么类型的网页。
meta:meta表示文件的元数据,具体可见博客HTML meta标签总结与属性使用介绍
注意,meta的字符集属性必须与文件的保存字符集属性相同。
h1~h6:标题标签,标题级数越大,字体大小越小,通常一个网页只有一个h1。
p:段落标签,每个段落自动换行,段落内部文字忽略连续空格(可以用&nbsp),也不会显示空行,且不会换行
br:段内换行,记得加斜杠。
pre:预留格式标签,文本中的空格和换行符会被保留,适合显示计算机代码。
span:组合行内元素,以便通过CSS样式来格式化。
hr:水平线标签,添加水平线。
!-- --:注释标签。
a:超链接标签,用于链接其他网页,href属性用于说明链接网址,需要说明协议名字(如:http://),也可以使用虚拟超链接,用#表示。
img:插入图像标签,src属性:文件路径+文件名,表示图片的地址,alt属性表示图片无法显示时显示的文本。
div:区域标签,属性:id(CSS中用),align:对齐方式。
ul:无序列表
ol:有序列表
li:列表项
table:表格标签,属性border表示表格的宽度
tr:表示table row,即表格的行。
td:表示表格的列。
th:把表格元素加粗显示。
form:表单标签,action属性与后端相关。
input:文本输入框/按钮,type属性,代表文本框类型,如text,password。name属性供给后端,如果type为submit、reset、radio和checkbox会有value属性,checked属性规定该选项是否已被选择。对了一组单选框name属性一定要一致啊。
select:下拉列表框标签。
option:选项标签,selected属性表示默认的选项。
textarea:文本区标签,属性cols代表列,rows代表行。

相关博客

HTML标签----图文详解

posted @ 2019-09-10 22:47  smile_zyk  阅读(267)  评论(0编辑  收藏  举报