第一章:常用的html标签
作业问题和提示:
- 开发工具:editplus,不要使用记事本,记事本有点毛病,一开始就是直接使用editplus,熟悉代码。
- 后缀,把文件的后缀名显示出现
- 态度:尽自己最大的努力
- 标点符号(英文半角标点符号,中文标点符号的话,默认占两个字符,英文占一个字符)
- ctrl+b快捷打开浏览器,需要配置浏览器的位置C:\Program Files (x86)\Google\Chrome\Application\chrome.exe`,然后先点击应用,再点击确定。
- 界面优化
- 配置模板
<!doctype html><!-- 声明文档类型(页面头部声明) html5 作用：具有向下兼容低版本 4.01 -->
<html><!--html根目录标签-->
<head><!-- 网页的头部页面的基本信息载体,不参与到页面的展示中,帮助展示 -->
<!-- 网页的三要素：字符编码，关键词、描述 -->
<meta charset='utf-8'/><!-- 元标签,储存单个信息的标签,单标签,不能写/,utf-8: 支持中文的万国码-->
<meta name='keywords' content='关键词'/><!--关键词 content:关键词内容-->
<meta name='description' content='描述'/><!-- 描述信息 -->
<title></title><!--网页的标题-->
</head>
<body><!--网页身体部分 页面的主题内容显示区域 -->
</body>
</html>- 代码规范–>tab缩进
- 网页的三要素：字符编码，关键词、描述,记得写,其他的可以不用写
- 代码不仅可以展示效果,还可以传递信息
- 在H5开发中使用单标签不加斜杠，在其他的开发中使用单标签加斜杠
html常用标签
什么是标签?
标签的写法是<>(英文半角下的小于符号和大于符号)
标签的意义：为了标记描述一个东西
标签的分类
单标签:不成对，只有一个标签，一开始结束了，不可以添加特定的内容
双标签:成对出现，可以添加特定的内容
常见的几个标签的讲解:
标题标签层级关系:h1一定要描述整体页面的主要内容,一个页面只能有一个h1,权重非常大
h1 - h6标题标签，没有h7以上
h1标签—>一个页面有且仅有一个哦 ,权重比较大(h1一定是要描述整体页面的主要内容)
h1权重最高，h6权重最低
强调标题标签存在的意义,为了页面结构的展示.和我们的文字大小没有关系。
有句话说的好,适合才是最好,那么使用标题标签时要注意这一点
标题标签会使文字变大变粗,换行(块级元素),而且会在前后文加上一些间隙(margin),后面可以使用css样式修改它
p标签
放置段落文字/图片(自动换行),通常情况下内容是文本
p标签前后会默认换行,有间隔
strong标签
<strong>我可是很强壮的</strong>加粗b/strong标签
- strong标签(强调标签)：在全文中强调关键词内容,展现效果是:加粗
- b标签：展示效果为加粗,一般不要用
<b>我可是很强壮的</b> <!-- 没有强调作用,加粗-->
<strong>我可是很强壮的</strong> <!--带有强调作用-->斜体i/em标签
- em标签(强调标签)：在段落中强调关键词内容,展现效果是:斜体
- i标签：展示效果是斜体,可以用于许多的小图标上面(用于iconfont)
<i>感觉不在状态,怎么办?</i> <!-- 没有强调作用-->
<em>有啥事,就不能睡一会再说嘛?</em> <!--带有强调作用-->PS.
- 如果仅仅是为了视觉效果,使用样式(CSS)调整
- Web提倡结构与样式的分离,为达到展示效果用样式,而strong与em对于搜索引擎上更加友好
span标签
span标签没有默认样式(固定格式表现),使用者可以通过css样式去操作某一段内容,变得更好看点(^▽^)
调整某个字/某些内容的颜色这类的
无序列表标签:(我要打一记组合拳)
<ul type='circle'><!--列表结构-->
<li>娃娃鱼</li>
<li>糖醋排骨</li>
<li>咕噜肉</li>
</ul>PS.
- 组合使用,注意结构的层次，ul是列表的整体，li是列表的每一项
- 列表中没有顺序,无序
- 可以改变type属性(disc(实心圆)/circle(空心圆)/square(实心正方形))不建议使用
有序列表标签:
<ol type='A'><!--列表结构-->
<li>娃娃鱼</li>
<li>糖醋排骨</li>
<li>咕噜肉</li>
</ol>PS.
- 有序
- type属性(1/a/A/I/i),不建议使用
- 属性start
start='8',限制开始的位置 - 属性reversed实现倒序
自定义列表标签:
<dl><!-- 列表的整体-->
<dt>小伙伴说:</dt><!-- 表头 标题-->
<dd>时间不早了,咱们早点休息吧~</dd><!-- 内容-->
<dt>老师说:</dt>
<dd>别猴急嘛~~</dd>
</dl>额外知识:
用户搜索词语的两套规范:
1. 百度竞价排名系统
2. 网站代码做的比较棒,seo优化