前端基础-01-html标签

html标签

前端基础-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常用标签学习

# 1. h1-h6标题标签
<h1>我是H1标签</h1> <!--一般H1标签只会有一个，有利于搜索-->
<h2>我是H2标签</h2>
<h3>我是H3标签</h3>
<h4>我是H4标签</h4>
<h5>我是H5标签</h5>
<h6>我是H6标签</h6>

#2.p标签，段落标签
<p>Python 的创始人</p>

#3.strong标签，加粗标签
<strong id="box">我是strong加粗的标签</strong> <!--不仅能加粗，还有力搜索引擎搜索-->

#4.b标签，加粗标签
<b>我是b标签加粗</b><!--只是物理加粗-->

#5.em标签，斜体标签
<em>我是斜体的</em><!--强调斜体，还有力搜索引擎搜索-->

#6.i标签，斜体标签
<i>我是斜体i标签</i><!--斜体作用-->
换行标签
#7.br标签，换行标签
<br/>

#8.hr标签，水平线标签
<hr/>

#9.特殊符号
<p>
    小于号： &lt; <br/>
    大于号：&gt; <br/>
    空格符号：12&nbsp;34<br/>
    空白位：12&emsp;&emsp;&emsp;&emsp;34<br/>
    &字符:&amp;<br/>
    版权符号:&copy;<br/>
</p>

#10.a标签
<a href="http://www.baidu.com" target="_self" > 百度</a> <br/>  <!--超链接-->
<a href="#">#刷新当前页面</a> <br/> <!--刷新页面-->
<a href="javascript:void (0)">死链接</a><br/><!--死链接-->
<a href="#box">锚点</a> <br/>

<!--
    只有a标签才有name属性
    其他标签要使用锚点，需要通过id属性跳转
   target属性，_blank新的页面打开   _self当前页面打开

-->
#锚点跳转的页面，name属性
<a href="javascript:void (0)" name="box">我是最前面的a标签</a>

#11.img标签
<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 高度
-->

#12.无序列表
<ul type="circle">
    <!--
    disc  默认：小黑圆点
    circle 空心圆
    square 小方框
    -->
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
    <li>无序列表4</li>
</ul>

#13.有序列表
<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>

#14.dl、dt列表
<dl >
    <dt>列表1</dt>
    <dt>列表2</dt>
    <dt>列表3</dt>
</dl>

#15.div块元素
<div style="display: inline-block">
    我是一个块级元素

</div>

#16.行内元素
<span>
        我是span元素
</span>
<!--
审查元素是块级和行内元素 ，通过google浏览器->F12->Computed（inline和block）
块级元素 (div)
    独占一行，支持设置宽高
    如果没有设置宽高，高度由内容，宽度是浏览器的宽度
    没有内容，在网页上是看不到的，元素是高度是0，宽度是浏览器的宽度
行内标签：（内联）元素 (span)
    可以和其他行内元素位于同一行
    不支持设置宽高
    内容撑开宽高
display:
1.inline 行内元素
2.inline-block   行内块元素
3.block  块级元素
4.none  隐藏元素，包含他的子标签，在页面中不占宽高

-->

发表于 2017-11-22 09:19
阅读 ( 1588 )
分类：javascript

前端基础-01-html标签

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »