day46 html
老师的笔记:
day46 课程安排 HTML CSS JS基础 DOM操作 jQuery Bootstrap pymysql Django基础 项目实战 Vue.js 今日概要: "PUT FBIWarning.avi 1024" 解析 "PUT FBIWarning.avi 1024".split(" ") 客户端和服务端之间要有一个协议(约定) 同理:浏览器和server端也要有一个约定,这个约定叫HTTP协议. HTTP特点:(了解) 1. 简单 就一来一回 2. 短连接(一来(request)一回(response)就结束了) 3. 无状态(每一次连接对于服务端来说都是新的) HTML: 大体印象: 就是一个规则,你真应该怎么写,浏览器应该怎么认. 多练习,记住常用的就可以了. 难度==0 要有信心 浏览器的输入URL,展示一个页面这个过程: jd.com --> https://www.jd.com/ 域名解析 --> 翻译成IP 端口是默认的80 到达服务端 服务端返回字符串 HTML: python文件放到.py文件里 HTML文件放到.html文件里了 FTP client server --> CS模式 browser(浏览器) server --> BS模式 --> Web开发 浏览器相当于一个现成的客户端, HTML标签: 两种格式: <标签名 k1=v1 k2=v2>内容</标签名> <标签名 k1=v1 k2=v2/> 常用标签: h1~h6标签 a标签 超链接 img 图片 HTML注释: 非常非常非常重要 <!-- 注释的内容 --> <!-- 图片开始 --> <img src="" /> <!-- 图片结束 --> HTML5和HTML的关系 HTML head标签里面的 -meta -title -link icon -link 引用CSS文件 -style 引用JS文件 body标签(我们在浏览器里面看到的) -块级标签(独占一行) h1~h6 hr p div -内联标签(长度根据内容决定) a b img u s i span -特殊符号 -DIV和span 没有特点(专为CSS调样式准备的两个标签) -嵌套规则 -块级标签可以嵌套块级标签和内联标签 !!!P标签不能嵌套div标签 -内联标签一般不能嵌套块级标签 -img标签 -width -height -src -alt -title -a标签 -target -href -https:// -相对地址(Django) -网页内部跳(锚点) HTML --> 裸体的人 CSS --> 穿上好看的衣服 JS --> 让人动起来
我们的前端就是做网页,就是我们浏览到的网页的样子,都是通过前端的技术来实现的,前端有一系列的操作指令,我们把这些操作指令都记录下来然后按照这个指令去操作即可得到想要的页面效果.
这是官方解释:
超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
html是做前端网页用的,它的一切效果和功能都是用标签来实现的.
我们来见识一下它长什么样子:
<!DOCTYPE html> -----这里是声明它是html文档,也就是文档格式,是必须要有的而且必须在文档的第一行,写于html标签之前,这个顺序是固定格式
<html lang="zh-CN"> ------这里是语种设置,我们一般是用中文,引号里面的部分就是zh-CN,如果是英文的话就是en
<head> ----------这里是头部,文档需要有声明,语种设置,还要有开头部分以及文体部分,这里即是开头部分,是固定格式它需要有起始和结束的表示方法这里是起始部分
<meta charset="UTF-8"> ---这是meta标签,这里在标签里面写入了文本编码格式,一般都用utf-8,我们的meta标签还有很多种,可以加不同的参数
<title>css样式优先级</title> ------这是标题=============这两行是在head里面的用缩进来进行区分
</head> --------这里是结束部分的表示方法,固定格式
<body> -------这是文本的核心具体内容,
</body> ------这是文本结束的固定符号 </html> ----这里跟上面的html对应是结束符号
html里面所有的标签都是用尖括号来包裹起来的,例如:<a> <div>等等,标签很多,我们目前掌握常用的几种即可.
一般的标签都是成对出现的例如<head></head>,也有单独出现的例如<br/>、<hr/>、<img src="1.jpg" />
标签的语法是在尖括号里面写入键对值,标签1=值1,标签2=值2,标签都是固定好的有明确规定什么标签代表什么意思的,值是按照标签的意思根据不同的场景加上去的
例如:
<h1 id="q1" class="w1 w2" style="color: darkgreen">hi tomorrw</h1>这里面的h1,id,class,style,都是标签,有特殊的意义,我们根据标签的
意义把对应的值放进去
我们的body里面的内容是在网页里面可以显示出来的,是可视的,不像上面head里面的东西都是看不到的,是底层的.
我们在body里面的标签分为块级标签和内联标签:
块级标签(他们是独占一行,就相当于我们写文章的标题一样,标题都是独占一行的):h1~h6 hr p div
内联标签(长度根据内容决定,他没有上面块级标签独占一行的特权,共享一行,需要换行时要用换行标签来实现):a b img u s i span
div和span没有特点他们是专门为css调样式而准备的标签,也就是说他们本身是没有任何功能,加上他们不会改变什么,因为我们的html是基于标签进行操作的,所以我们很多时候会需要用到这种
留白的标签,便于进行渲染.
关于嵌套:
我们为了实现效果往往一行标签代码不足以完成功能,所以会需要很多行一起来达到效果,这里就会牵扯到一个嵌套的概念,
我们的块级标签可以嵌套块级标签同时也可以嵌套内联标签,
内联标签一般不能嵌套块级标签,但是能嵌套内联标签,
!!!p标签不能嵌套div标签
img标签里面包含的内容(它是对于图片进行设定的):
width----图片的宽度
height---图片的高度 这里的高度和宽度,如果只设定一个的话,那么系统会自动等比例缩小
src------图片的路径
alt------图片未加载成功时的提示信息
title----鼠标悬浮的提示信息
a标签:
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
href属性指定目标网页地址。该地址可以有几种类型：
- 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
- 相对URL - 指当前站点中确切的路径（href="index.htm"）
- 锚URL - 指向页面中的锚（href="#top"）
target：
- _blank表示在新标签页中打开目标网页 ----(如果不加上targe=_blank,系统会默认在当前页面打开新页面,如果加上的话就另起一个新页面)
- _self表示在当前标签页中打开目标网页
几个很重要的属性：
- id：定义标签的唯一ID，HTML文档树中唯一 它用来识别每个标签的编号,我们几乎会同一时间在同一个文件里面使用同一个标签很多次,为了区分每个标签,我们会加上id,id是唯一的,就像人的身份证号码一样的
- class：为html元素定义一个或多个类名（classname）(CSS样式类名)
- style：规定元素的行内样式（CSS样式） 就相当于是风格,看你要什么样风格的内容,比如颜色,字体,符号之类的都是放到这个style里面设定.
注释,我们的注释是为了以后我们再回来用这些代码的时候,可以更清晰地更便捷理解它,很多时候我们作为初学者在学习的时候,都是先把注释写出来然后根据注释去把代码写出来.所以哪吒有一句话:注释是代码之母.
meta标签的几种形式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>css样式优先级</title>
</head>
<body>
</body>
</html>
1,http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
2,name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="老男孩教育Python学院">
具体结构标签,以及用法:
<!--标题--> -----这样写是加注释的意思,我们在python里面的注释是#,在mysql里面的注释是-- ,而在html里面的注释就是这样的<!--<标签,内容>-->
<title>oldboy</title>
<!--icon图标-->
<link rel="icon" href="favicon.ico"> ---图标就是我们的网页在显示的时候,在网址前显示的该网页的特点图形,截图如下:
<!--样式文件-->
<link rel="stylesheet" href="mystyle.css"> -------样式文件可以是网址,可以是图片视频文本都是样式的
<!--JS文件-->
<script src="myscript.js"></script> -----------讲到js的时候会提到这里的内容
一些常用的标签:
<b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <h1>标题1</h1> <h2>标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> <!--换行--> <br> <!--水平线--><hr>
