十一章 前端
web端的组成:
-
htlm一堆标签组成的内容,基础的排版和样式 -
css描述了标签的样式 -
js / jq动态的效果
11.1 HTML
HTML是超文本标记语言,它不是一种编程语言,是一种描述性的标记语言,用于描述超文本内容的显示方式.比如字体.颜色,大小等.
超文本: 图片,音频,视屏称为超文本.
标记: <英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
11.1.1 HTML的结构
-
声明部分:主要作用是用来告诉浏览器这个页面使用的标准 -- HTML5标准
-
head部分:写在head标签里面的内容在网页上不可见
title : 打开网页的时候标签页显示的内容
meta : 网页的元信息 -- 编码,浏览器版本,关键字,描述
-
body: 身体部分
特性:空白折叠(空格在网页上不会显示),要使用
 代表空格才能显示,网页上的其他特殊字符 :
< 小于号 , > 大于号 , ©
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co ntent="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
11.1.2 标签的分类
块级标签
占满一整行,自带换行效果
标题标签: h1 -- h6 ( 1-6是指标题等级)
内联标签(行内标签)
字体标签
| 标签名 | 作用 |
|---|---|
| b / strong | 加粗 |
| em | 斜体 |
| sup / sub | 上下标 |
| del / s | 中划线 |
| u | 下划线 |
| br | 换行符 |
| span | 内容标签 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <img src="JJY.jpg" alt="鞠婧祎" width="400"> </body> </html><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>标题1</h1> <h2>标题1</h2> <h3>标题1</h3> <h4>标题1</h4> <h5>标题1</h5> <h6>标题1</h6> <b>加粗1</b> <strong>加粗2</strong> <br> <em>斜体</em> <sup>上标</sup> <sub>下标</sub> <del>中划线</del> <s>中划线</s> <u>下划线</u> <span>这里写内容</span> </body> </html>
img标签
-
src属性: 一张图片的地址(网络地址,本地路径)
-
width属性: 设置图片的宽度 " 200px"
-
height属性: 设置图片的高度 " 400px"
-
(width 和 height 一般只设置一个)
-
alt属性: 描述图片(图片加载失败的时候显示的内容)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <img src="JJY.jpg" alt="鞠婧祎" width="400"> </body> </html>
a标签
-
超链接标签
-
herf属性: 添加网址 / 邮件资源 / 设置锚点
-
target属性: 默认值 ' _self ' 在当前网页打开 / ' _blank' 在新网页跳转
-
title属性: 鼠标悬浮显示的小标题
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <a href="http://www.baidu.com" target="_blank" title="百度一下">百度一下</a> <h3 id="222">id标识的地方</h3> <a name="111"></a> <a href="mailto:872502394@qq.com" target="_blank" title="联系我们">联系我们</a> <a href="#">回到顶部</a> <a href="#111">回到name=111标识的地方</a> <a href="#222">回到id=222标识的地方</a> </body> </html>