前端基础-html标签
先来看一个Html模板
<!DOCTYPE html><!--文档类型-->
<html lang="en"><!--根标签-->
<head><!--网页头部-->
<meta charset="UTF-8"> <!--编码格式-->
<title>HTML模板</title>
</head>
<body><!--可视化区域 网页主体-->
</body>
</html>
HTML命名规范
HTML书写规范:
1.名字用小写字母
2.以英文开头,可以包含英文字符、数字、_、-,不能使用中文
3.驼峰命名
4.id命名:id只能有一个名字,而且在页面中相同的名字只能出现一次,相当于身份证号码
5.class命名:class可以出现多次
Html常用标签学习
<h1>我是H1标签</h1> <!--一般H1标签只会有一个,有利于搜索-->
<h2>我是H2标签</h2>
<h3>我是H3标签</h3>
<h4>我是H4标签</h4>
<h5>我是H5标签</h5>
<h6>我是H6标签</h6>
<p>Python 的创始人</p>
<strong id="box">我是strong加粗的标签</strong> <!--不仅能加粗,还有力搜索引擎搜索-->
<b>我是b标签加粗</b><!--只是物理加粗-->
<em>我是斜体的</em><!--强调斜体,还有力搜索引擎搜索-->
<i>我是斜体i标签</i><!--斜体作用-->
换行标签
<br/>
<hr/>
<p>
小于号: < <br/>
大于号:> <br/>
空格符号:12 34<br/>
空白位:12    34<br/>
&字符:&<br/>
版权符号:©<br/>
</p>
<a href="http://www.baidu.com" target="_self" > 百度</a> <br/> <!--超链接-->
<a href="#">
<a href="javascript:void (0)">死链接</a><br/><!--死链接-->
<a href="#box">锚点</a> <br/>
<!--
只有a标签才有name属性
其他标签要使用锚点,需要通过id属性跳转
target属性,_blank新的页面打开 _self当前页面打开
-->
<a href="javascript:void (0)" name="box">我是最前面的a标签</a>
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=594559231,2167829292&fm=27&gp=0.jpg"
alt="百度图片"
width="100" height="100">
<!--
src 图片的路径
alt 图片的描述
width 宽度
height 高度
-->
<ul type="circle">
<!--
disc 默认:小黑圆点
circle 空心圆
square 小方框
-->
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
<h2>有序列表</h2>
<ol type="I" reversed start="2">
<!--
1 1 2 3 4
a a b c d
A A B C D
reversed 降序升序
start 起始位置
-->
<li>有系列表1</li>
<li>有系列表2</li>
<li>有系列表3</li>
</ol>
<dl >
<dt>列表1</dt>
<dt>列表2</dt>
<dt>列表3</dt>
</dl>
<div style="display: inline-block">
我是一个块级元素
</div>
<span>
我是span元素
</span>
<!--
审查元素是块级和行内元素 ,通过google浏览器->F12->Computed(inline和block)
块级元素 (div)
独占一行,支持设置宽高
如果没有设置宽高,高度由内容,宽度是浏览器的宽度
没有内容,在网页上是看不到的,元素是高度是0,宽度是浏览器的宽度
行内标签:(内联)元素 (span)
可以和其他行内元素位于同一行
不支持设置宽高
内容撑开宽高
display:
1.inline 行内元素
2.inline-block 行内块元素
3.block 块级元素
4.none 隐藏元素,包含他的子标签,在页面中不占宽高
-->