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特点:(了解)

. 简单 就一来一回

. 短连接(一来(request)一回(response)就结束了)

. 无状态(每一次连接对于服务端来说都是新的)

HTML:

大体印象:

就是一个规则,你真应该怎么写,浏览器应该怎么认.

多练习,记住常用的就可以了.

难度==

要有信心

浏览器的输入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>

<link rel="icon" href="favicon.ico"> ---图标就是我们的网页在显示的时候,在网址前显示的该网页的特点图形,截图如下:

<link rel="stylesheet" href="mystyle.css"> -------样式文件可以是网址,可以是图片视频文本都是样式的

<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>

day46 html的更多相关文章

day46——特殊符号、标签分类、标签
day46 特殊符号 --空格 >大于号 <小于号 ... 找HTML特殊符号标签分类块级标签(行外标签):独占一行,可以包含内敛标签和某些块级标签,div,p,h1-h6,hr,f ...
day46 前端基础HTML5+CSS3
编辑器 pycharm,sublime,hbuild,webstorm,atom 前端概念广义:用户能看见并且交互的显示页面狭义:运行在浏览器上的页面学习的语言 html5 => (h5架 ...
Python：Day46 Javascript DOM
history对象: History 对象包含用户(在浏览器窗口中)访问过的 URL.窗口之间是相互独立的. <input type="button" onclick=&qu ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
day46
CSS选择器盒模型标签a.img.list 伪类选择器 CSS选择器一.基础选择器 1.通配选择器 - { border: solid; } 匹配文档中所有标签:通常指html.body及bod ...
HTML初识（Day46）
一.HTML初识 1.web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM ...
js实现div闪烁-------Day46
近期在学着用easyui,发现框架用起来果然是方便简洁,能弄出这框架的都是大神级别了吧,牛啊.... 今天碰到这个应用能够说是让我很之无语,整出源代码来一看就明确了.可之前却还是感觉很奇妙,我也经常告 ...
Pyhton学习——Day46
# 数据库:存储数据的仓库# 数据库更多的是安全.备份# 客户端取服务端的数据实际都是从服务端的内存中抓取数据# 数据库管理系统软件# 数据库管理系统(Database Management Syst ...
（day46）DOM、BOM、事件
目录一.BOM (一)定义 (二)window对象 (三)window的子对象 (1)navigator对象 (2)screen对象 (3)history对象 (4)location对象 (5)弹出 ...

随机推荐

tornado的异步效果
第一种方式: import tornado.ioloop import tornado.web from tornado import gen from tornado.concurrent impo ...
git reset --hard xxxxxxx
关于git reset --hard xxxxxxx命令之Git版本回退今晚代码写着写着就头脑有点发懵,手指也不听使唤了竟然让我敲出了 git reset --hard 命令,然后的然后就是之前所有 ...
Confluence 6 管理协同编辑 - 代理和 SSL 的考虑
对于你如何连接 Synchrony 是与你的环境有关的.我们知道绝大部分的 Confluence 站点是运行在反向代理后面的,同时还使用了 SSL.这里是帮助你在你环境中识别正确的配置的一些信息和一 ...
Confluence 6 使用 Apache 和 mod_proxy 添加 SSL和其他
添加 SSL 如果你计划在你的应用中启用 SSL ,请参考 Securing your Atlassian applications with Apache using SSL页面中的内容,并确定你在 ...
openmp
https://blog.csdn.net/fuwenyan/article/details/79500765a https://www.cnblogs.com/yangyangcv/archive/ ...
iis配置问题
最近调试程序时发现一直用的是vs自带的服务器当我切换成iis时,发现虽然能显示界面,却连不上数据库 (程序数据库的一系列操作是通过wcf ria完成的) 以前在winserver2012上也遇到过这 ...
android组件之TabHost
一介绍 1.1 TAB的容器.这个对象包含两个子元素: TabWidget:管理标签(tabs),用户点击来选择一个特定的标签,是它告诉TabHost去切换界面的 FrameLayout:对象显示该 ...
Microsoft Graph 概述
这个系列文章已经进行到了实质的阶段,继上一篇介绍了如何搭建Office 365开发环境之后,我会通过这篇文章给大家介绍一个非常重要的概念:Microsoft Graph.它之所以重要,首先是因为它是 ...
使用Eclipse、Tomcat遇到的一些问题
Tomcat服务无法启动前两天瞎搞,试着弄了弄Android的环境.结果不知道动了什么地方,Tomcat崩了,本地打开localhost:8080一直显示404,eclipse也无法使用Tomcat ...
Allegro PCB Design GXL (legacy) 将指定的层导出为DXF
Allegro PCB Design GXL (legacy) version 16.6-2015 1.菜单:Display > Color/Visibility... 2.打开Color Di ...

day46 html

day46 html的更多相关文章

随机推荐

热门专题