当前位置:首页 > Web开发 > 正文

HTML前端基础

2024-03-31 Web开发

标签:

一、HTML标签

前端语言


    HTML-将页面展现出来
    CSS-修饰前端标签 让HTML更好看 css 对html 进行修饰
    JS-能够让页面动起来

HTML

htyper text markup language  即超文本标记语言

超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

标记语言: 标记(标签)构成的语言.

网页==HTML文档,由浏览器解析,用来展示的

静态网页:静态的资源,如xxx.html

动态网页:html代码是由某种开发语言根据用户请求动态生成的

技术图片

什么是标签:

是由一对尖括号包裹的单词构成 例如: <html> *所有标签中的单词不可能以数字开头.

标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.

标签分为两部分: 开始标签<a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.

有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img />

标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

1 <!DOCTYPE html> #声明文档类型, 2 <html lang="en"> #是所有标签的容器,lang表示语言,表示整个文档的内容以什么语言为主 3 <head> #页面结构的头部,包含辅助显示的标签 4 <meta charset="UTF-8"> 5 <title>Title</title> #页面的标题,在标题栏显示的内容 6 </head> 7 <body> 页面结构的主体,包含在页面中显示的标签 8 9 </body> 10 </html> 11 <!DOCTYPE>:设置当前文档使用的标准,建议使用HTML5的类型, 12 HTML标签:用于包裹页面上所有的其他标签 13 head标签:用于存放title,meta,base,style,script,link标签,这些标签都是用来辅助显示的标签,每个head标签必须有一个title标签 14 body标签:用于存放所有的页面上的结构标签 15 title标签:用于设置页面的标题、同时提高SEO的权重 16 meta标签:设置页面上的字符集(编码格式),utf-8,gb2312 17 <!--注释内容-->:HTML注释,给代码添加的代码说明性的文字,或者使一些没有必要去掉它的作用 18 语义化:是指用合理HTML标签以及特有的属性去格式化文档内容

1.1 基本标签

不加标签的纯文字也是可以在body中写的 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> #独占一个段落 <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <br> #换行 <!--水平线--><hr> #就是单独个一个水平线 每次加上一些内容,别忘了刷新一下页面,才能看到新添加的效果或者内容,其实上面这些标签很少用

1.2 特殊字符

&nbsp; #空格 ° #&deg; &gt; #> ± #&plusmn; &lt; #< ÷ #&divide; &amp; #& 乘号 #&times; &yen; #¥ ²平方 #&sup2; &copy; #版权标识© ³立方 #&sup3 &reg; #注册

1.3 div标签和span标签(最常用的),没有语义的标签 div布局标签

在页面上单独独占一行,如果不设置宽度,默认占一行,通常作为容器布局的时候使用 div是块级标签,也叫【伪标签】,无论自己有多大,都占满屏幕

span标签

一行可以放多个,显示大小由内容决定 span标签又叫内联标签,也叫【白板标签】,自己有多大就占多大

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/40883.html