什么是HTML:超文本标记语言(HyperText Markup Language,简称 HTML);
怎么学HTML :HTML 是一门标记语言,标记语言由一套标记标签组成,学习 HTML,其实就是学习标签 �;
HTML基本结构
<!DOCTYPE html> <!-- 文档类型 -->
<html>
<head> <!-- 网页头部 -->
<meta charset="utf-8"> <!-- 国际编码 -->
<title>html基本结构</title> <!-- 网页标题 -->
</head>
<body> <!-- 网页主体 -->
Hello
<p>我是网页主体</p>
</body>
</html>
标题标签
<!--一个页面通常只出现一个h1标签有利于搜索引擎搜索-->
标题标签
<h1>我是h1标签</h1>
<h2 id="box">我是h2标签</h2>
<h3>我是h3标签</h3> <!--id是唯一的,不可重复-->
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
<h7>我是h7标签</h7>
单标签
<hr> <!--hr水平线标签-->
<br> <!--br换行标签-->
小于号:< <
大于号:> >
空格号: 亲 爱
空白位: 亲 爱
& 字符:& &
版权号:© ©
注册商标:® ®
TM: ™ ™
粗/斜体标签
<b>物理粗体标签</b><br> <!--只是物理加粗-->
<strong>粗体标签,有利于SEO搜索</strong><!--不仅能加粗,还有利于搜索引擎搜索-->
<h2>斜体标签</h2>
<i>物理斜体</i><br> <!--斜体作用-->
<em>em斜体,有利于搜索</em> <!--强调斜体,利于搜索引擎搜索-->
<strong><em>啦啦啦</em></strong>
列表标签
<h3>无序列表</h3>
<ul type="square">
<li>1</li>
<li>2</li>
</ul>
<!-- type
disc 默认 小黑圆点
circle 空心圆
square 小方框
-->
<h3>有序列表</h3>
<ol type='A' reversed start='3'> <!--3-C-倒数第几个字母-->
<li>A</li>
<li>B</li>
</ol>
<!-- reversed 降序排序
sorted 升序
start 有序列表起始值
-->
<h3>自定义列表</h3>
<dl>
<dt>标题</dt>
<dd>E</dd>
<dd>F</dd>
<dd>G</dd>
</dl>
图片标签
<img src="图片链接" alt="关键字,用于SEO">
超链接a标签
<a href="图片链接">xxx</a>
<a href="http://www.baidu.com"" target='_self'>超链接>>>去百度</a><br>
<a href="#">#-刷新当前页面</a><br>
<a href="javascript:void(0);">死链接,没有反应</a><br>
<a href="#ss" name='xx'>跳转到顶部</a>
<!--
只有拥有name属性的a标签才有锚点
其他标签可以通过id属性实现锚点
target属性
_self 当前页面打开 默认
_blank 在新窗口打开
-->
HTMLclass/id书写规范
1.名字用小写字母
2.以英文开头,可以包含英文字母,数字,_,-,不能使用中文
3.驼峰命名
className 第二个单词首字母大写
4.id命名
id只能有一个名字,而且在页面中相同的名字只能出现一次,相当于身份证号码一样
5.class命名
class可以出现多次,而且相同的名字可以有多个,相当于人名一样
div+span
div:块状元素,独占一行。可以设置大小。可以通过修改display属性改变。
pan:行间元素,无法设置狂傲,大小由内容撑起。可以通过修改display属性改变。
个人笔记,便于日后查看。