html–Day01

一.网页的三层架构

  我们常见的网页的三层架构分别为html,css,js。

结构层
html: 超文本标记语言，结构（HyperText Markup Language）
（1）双标签：html,body,div
（2）单标签：meta,img,hr
典型的列子
```
<div>
	每个程序员的信仰-hello world
</div>
```
表现层
css:层叠样式表（Cascading Style Sheets）——修饰、美化网页 (化妆师)
```
div{
	width:200px;//宽度
	height:200px;//高度
	background-color:red//背景颜色
}
```

行为层

js:脚本语言 (Javascript)（行为）——增加动态交互功能

<script>
var wrapper=document.getElementsByTagName("div");//获取div标签
wrapper.onclick=function(){//注册点击事件
     this.style.width="300px";//改变宽度
     this.style.height="300px";//改变高度
     this.style.background="green";//改变背景颜色
}
</script>

二.常用标签

	`div` ——————块 
	`img` ——————图片（单标签） 
	`a` ———————链接、下载、锚点 
	`h1-h6`—————-标题 
	`p` ———————段落 
	`span` —————-区分样式 
	`ul`——————–无序列表 
	`ol`——————–有序列表
	`li`————————-列表项
	`dl` ——————-定义列表
    `dt` ————————-定义列表标题
    `dd` ————————定义列表项
	`i` ———————定义斜体文字 
	`strong`————–强调（粗体） 
	`em` ——————强调（斜体）trong 标签和 em标签一样，用于强调文本，但它强调的程度更强一些。 
	`br` ———-换行 
	`hr`——————定义水平线

三、img标签详解

<img src="/1.jpg" width="300" height="300" alt="美女"/>

img属性：

src -定义图片路径
width -图片宽度,如果只给了width 没给height,height会自等比例缩放
height-图片高度,如果只给了height 没给width,width会自等比例缩放
alt -图片名字给百度搜索引擎抓取使用(SEO)
title -标题给用户提示信息（有利于用户体验）

四、a标签

a标签功能： 链接 | 下载 | 锚点

链接: href='url' 中url是一个网页地址
相对 URL - 指向站点内的某个文件（href=”./index.html”）
绝对 URL - 指向另一个站点（比如 href=”http://www.baidu.com”）
下载：href=’url’中url链接地址(下载地址)一个软件就会下载
锚点：href=’#ID名’ 锚点

target 链接打开方式

_blank 新窗口（空白页面）
_self 当前窗口

<base target="_blank" /> 定义默认网页打开方式

五、路径

相对路径 —相对于当前文档位置出发（推荐使用）

绝对路径—路径名称不能出现中文

本地绝对路径：从盘符出发

D:\a\b\c\d\xxxx.jpg

网络绝对路径：从域名出发

https://www.baidu.com/img/bd_logo1.png

注意=>需要跳到上一级要../ 如果要跳两级../../

六、代码seo方法：

SEO : 搜索引擎优化

一、页面标签语义化；
二、使用对SEO有利的标签： h1/h2/h3/strong/em……
三、提高页面关键词密度；

学习前端第一天