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)弹出 ...

随机推荐

基于kali linux无线网络渗透测试
1.无线网络渗透测试目前主要有三种方式,分别是暴力破解PIN码,跑握手包,搭建伪热点三种方式,当然还存在其他的方式. 1.1暴力破解路由器的PIN码由八位0-9的数字组成,PIN码由散步风组成,前四 ...
python网络爬虫笔记（一）
一.查询数据字典型数据 1.先说说dictionary查找和插入的速度极快,不会随着key的增加减慢速度,但是占用的内存大 2.list查找和插入的时间随着元素的增加而增加,但还是占用的空间小,内存浪 ...
vue 的动画
1.vue 的动画流程分为enter,和leave分别对应以下两幅图 <!doctype html><html lang="en"><head> ...
Python游戏编程(Pygame)
安装Pygame pip install pygame C:\Users> pip install pygame Collecting pygame Downloading https://fi ...
Allegro PCB Design GXL (legacy) 从dxf文件中导入板框
Allegro PCB Design GXL (legacy) version 16.6-2015 新建brd文件,并设置好相应的参数之后,点击菜单:File > Import > DXF ...
Two Sum【LeetCode】
Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...
复习reactnative....
import React, { Component } from 'react'; import { AppRegistry, Text, Image, View, TextInput, Scroll ...
UPC 6616 Small Mulitple
D - Small Multiple 题目传送门 Time limit : 2sec / Memory limit : 256MB Score : 700 points Problem Stateme ...
NetCore 生成RSA公私钥对，公钥加密私钥解密，私钥加密公钥解密
using Newtonsoft.Json; using Org.BouncyCastle.Crypto; using Org.BouncyCastle.Crypto.Encodings; using ...
[转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信子组件向父组件通信跨级组件之间通信非嵌套组件间通信下面依次说下这几种通 ...

day46 html

day46 html的更多相关文章

随机推荐

热门专题