HTML演示、常见标签(head内与body内常见标签)、列表与表格标签

昨日内容回顾

线程池与进程池的常见方法

1.池子的创建
	直接导入模块即可
    
2.任务的提交
	pool.submit()
    
3.异步回调机制
	pool.submit.add_done_callback()
    
4.获取结果
	返回值.result()

协程的概念及代码实现

# 进程
	资源单位
    
# 线程
	执行单位
    
# 协程
	意淫单位(单线程下实现并发)
    
'''代码层面需要自己检测IO并自动切换》》》欺骗CPU状态'''

前端简介

1.前端与后端的概念
	前端：手机界面(app) 电脑界面(软件) 平板界面(软件)...
	后端：各种编程语言编写的代码(python代码、java代码、c++代码)...
    
2.前端的学习思路
	掌握基本前端页面搭建 看得懂前端工程师所编写的代码
    
3.前端三剑客简介
	HTML、CSS、Js(JavaScript)

HTTP协议

"""
由来：
	因为浏览器需要充当很多服务端的客户端
	但是不同服务端的代码是由不同的程序员开发的
	从而会出现数据格式和编程语法千变万化 
	
如何让浏览器全部兼容 让浏览器能够无障碍的与诸多服务端进行数据交互
	所有有了 HTTP协议
"""

1.四大特性
	基于请求响应
	基于TCP、IP作用于应用层之上的协议
	无状态
	无连接
    
2.数据格式
	浏览器给服务端发送数据(请求数据格式)
	请求首行
	请求头
	请求体
	服务端给浏览器发送数据(响应数据格式)
	响应首行
	响应头
	响应体
    
3.响应状态码
	用数字来简化想要表达的意思
	1XX
	2XX	200 OK
	3XX	302 304
	4XX	403 404
	5XX	
'''公司中可能还会自定义状态码 通常是以10000起步'''

HTML前戏

<h1>哈哈哈</h1>
<a href="url">点击跳转</a>
<img src='url'/>

"""
上述文本到了浏览器上面会自动被渲染成不同的样式
	h1 渲染成一级标题
	a 渲染成链接标签
	img 渲染成图片
引出:HTML标签语法
"""

今日内容概要

HTML简介
HTML基本标签
HTML常用符号
HTML常用标签
列表标签
表格标签

内容详细

1、HTML简介

# 1.HTML是构造网页的骨架
	几乎所有的网站都是由HTML构建而成
    
# 2.HTML 中文：超文本标记语言
'''它不是一门编程语言 没有任何的逻辑 只有固定的标记功能'''

# 3.HTML标签分类
	1.双标签(有头有尾)
		<a></a>
	2.自闭合标签(单标签)
		<img/>
        
# 4.HTML文档结构
"""
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>
"""
	01 <!DOCTYPE html>声明为HTML5文档
	
	02 <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）
    
	03 <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据
		'''<head>编写给浏览器查看的内容</head>'''
    
	04 <title>、</title>定义了网页标题，在浏览器标题栏显示
    
	05 <body>、</body>之间的文本是可见的网页主体内容
		'''<body>编写展示给用户查看的内容</body>'''
        
'''在使用编程工具创建的时候就会自动编写文档结构'''
        
# 5.HTML语法注释
	<!--单行注释-->
    
	<!--
	多行注释
	多行注释
	-->
'''在编写的时候 编程工具也有注释快捷键 ctrl+?'''

2、如何创建及展示

"""
存放网页骨架的文件后缀名 一般都是 .HTML
该类文件主要的打开方式为浏览器形式
"""

1.以pycharm为例
	右键new点击HTML FILE创建即可(如下图)
    
2.如何打开展示
	右上方会提供多种浏览器(注意需要提前下载)
	"""
	如果你已经下载了浏览器 打开时报错 
	点击弹出的提示fix 自行配置你的浏览器所在的Windows路径即可
	"""
    
# 编写HTML标签的时候 不需要自己写大括号小括号等 只需要写标签名称 然后 tab键 即可自动补全格式(所有支持编写HTML文件的工具内部都会自带的插件语法功能)

3、head内常见标签

# <title></title> 定义网页标题

# <style></style> 内部支持css代码

# <script></script> 内部支持编写js代码 还可以通过src属性导入外部js文件

# <link/> 通过href属性引入外部的css文件

# <meta/> 定义网页源信息
	keywords 关键字搜索
	description 网页描述信息

# HTML文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>
    <style>
    h1{
        color: greenyellow;
    }
    </style>
    <link rel="stylesheet" href="03%20first%20css%20file.css">
    <script>
        prompt('好想快点遇见那个满眼都是我的女孩')
    </script>
    <script src="02%20first%20js%20file.js"></script>
    
<!--指定文档的编码类型(需要知道)-->
    <meta http-equiv="content-Type" charset=UTF8">
<!--2秒后跳转到对应的网址，注意引号(了解)-->
    <meta http-equiv="refresh" content="2;URL=https://www.sogou.com">
<!--告诉IE以最高级模式渲染文档(了解)-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="老男孩教育Python学院">
</head>
<body>
<h1>hello world</h1>
</body>
</html>


"""
在html文件中 可以编写html、css、js
但是实际工作中 三者其实是分开存放的 这样有利于后期维护和扩展
"""

4、body内基本标签

# h1~h6	标题标签

# p	段落标签

# b	加粗

# i	斜体

# u	下划线

# s	删除线

# br	换行

# hr	水平分割线

"""有时候相同的样式 可能有多种标签可以实现!!!"""

# 标签分类：
	01 单、双标签
    
	02 
	块儿级标签 h1~h6 p
		独占一行显示(后期可以通过css调正不占一行)
        
	行内标签 u i s b 
		自身文本多大 就占多大 
        
        
        
# HTML文件内容：    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>        
        
</head>

<body>
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>

<p>段落标签</p>
<br>
<p>段落标签</p>
<hr>
<p>段落标签</p>

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>

</body>
</html>

5、特殊符号

&nbsp;	空格
&gt;	大于号
&lt;	小于号
&amp;	&符号
&yen;	羊角符
&copy;	版权符
&reg;	注册


# HTML文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>
</head>

<body>

<p>世界那么大，&nbsp;&nbsp;&nbsp;&nbsp;孤独的人总是很晚回家。</p>
<p> a &gt; b </p>
<p> a &lt; b </p>
<p> &amp; </p>
<p> &yen; </p>
<p> &copy; </p>
<p> &reg; </p>

</body>
</html>

6、常见标签

# 布局标签
	网页在制作之前需要提前布局好
	div	块儿级标签
	span	行内标签

"""
标签是可以嵌套的 但是要遵循一定的规律：
	1.块儿级标签 
		可以无限制的嵌套块儿级标签与行内标签
		特例：p标签虽然也是块儿级标签 但是不能嵌套块儿级标签
		
	2.行内标签
		不能嵌套块儿级标签
		可以嵌套行内标签
		

知识点扩展
	页面布局的技巧：
		先用div划分区域 之后再考虑填充具体内容
		可以参考小米官网练习该技巧
"""
    

# 1.a标签(链接标签)
	用法一：通过 href属性 指定网址(URL)点击跳转
		跳转过程也有两种方式：
			01 当前页面跳转 target="_self"  默认
			02 新建页面跳转 target="_blank"
            
	用法二：锚点功能
		通过href属性指定标签的id值点击即可跳转到对应位置
        
"""
网址其实并不是一个非常专业的名词
	URL:统一资源定位符
	
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。

URL举例:
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html
"""

# 2.img标签(图片标签)
	src属性指定图片地址 可以是本地的地址也可以是网络上的地址
    
	alt属性编写文本 用于在图片无法加载出来的情况下给用户的提示信息
	title属性写文本 用于鼠标悬浮在图片上之后提示的文本信息
    
	height、width属性写像素 用于调整图片的尺寸
	需要注意调整的时候 修改一个另外一个自动等比例缩放 如果同时调整两个 那么可能会造成图片的失真 所以一般调节一项即可
    
    
# HTML文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>
</head>

<body>

<div>div标签</div>
<div>div标签</div>
<span>span标签</span>
<span>span标签</span>


<a href="https://sogou.com" target="_blank">链接标签</a>

<!--<a href="#d3" id="d1">标题3的内容</a>-->
<!--<div style="background-color: yellow;height: 1000px"></div>-->
<!--<a href="#d1" id="d2">标题1的内容</a>-->
<!--<div style="background-color: red;height: 1000px"></div>-->
<!--<a href="#d2" id="d3">标题2的内容</a>-->
<!--<div style="background-color: black;height: 1000px"></div>-->


<img src="https://img2.baidu.com/it/u=1982278742,676602082&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=800" alt="图片地址不存在时 提示用户的信息" title="这是我的女朋友" height="500px">
<img src="https://gimg2.baidu.com/image_search/" alt="图片地址不存在时 提示用户的信息">


</body>
</html>

7、标签的两大重要属性

1.id属性
	个体查找
	类似于标签的身份证号 在同一个html页面上id不能重复

2.class属性
	群体查找
	类似于python面向对象中的类的继承 可以将多个标签划为一类
	<h1 class='c1'></h1>
	<p class='c1'></p>
    
	并且一个标签可以有很多类
	<h1 class='c1 c2 c3'></h1>
	<p class='c1 c8 c9'></p>

8、列表标签

# 1.无序列表(掌握)
	标题前面没有用于标识数字顺序的提示
    
<ul>无序列表标识</ul>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

"""
网页上有规则排列的多个横向或者竖向内容 几乎都是无序列表
要想实现需要css相关知识
"""

# 2.有序列表(了解)
<ol>有序列表标识</ol>
<ol>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>

# 3.标题列表(了解)
<dl>
    <dt>标题1</dt>
      <dd>内容1</dd>
    <dt>标题2</dt>
      <dd>内容1</dd>
      <dd>内容2</dd>
</dl>

"""
ul>li{$$$}*10 按tab键 一键写出10行内容
<ul>
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
    <li>006</li>
    <li>007</li>
    <li>008</li>
    <li>009</li>
    <li>010</li>
</ul>
"""


# HTML文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>
</head>

<body>

<ul>无序列表标识</ul>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

<ol>有序列表标识</ol>
<ol>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>

<dl>
    <dt>标题1</dt>
      <dd>内容1</dd>
    <dt>标题2</dt>
      <dd>内容1</dd>
      <dd>内容2</dd>
</dl>


</body>
</html>

9、表格标签

'''
当需要展示一些具体固定格式的多条数据的时候可以考虑使用(excel)
'''

# 1.表格标签的格式
<table>
    <thead>表头</thead>
    <tbody>表单</tbody>
</table>

# 2.tr标签
	tr就表示一行
    
# 3.th标签
	在表头的字段名称
    
# 4.td标签
	普通的单元格数据
    

"""
	我们只需要掌握最基本的html标签即可 
	至于花里胡哨的样式后面学习完前端框架之后 直接cv拷贝即可 
	都是别人提前写好的

其他表格标签(了解即可)：
border: 表格边框
cellpadding: 内边距
cellspacing: 外边距
width: 像素 百分比（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
"""
    
    
    
    
# HTML文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个网站很牛逼</title>
</head>

<body>

<table border="1">
    <thead>
        <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>jason</td>
            <td>20</td>
            <td>man</td>
        </tr>
        <tr>
            <td>jack</td>
            <td>25</td>
            <td>man</td>
        </tr>
        <tr>
            <td>mary</td>
            <td>18</td>
            <td>woman</td>
        </tr>
    </tbody>
</table>

</body>
</html>

posted @ 2022-01-19 22:08 Deity_JGX 阅读(267) 评论(0) 收藏举报

刷新页面返回顶部

Deity_JGX

HTML演示、常见标签(head内与body内常见标签)、列表与表格标签

昨日内容回顾

今日内容概要

内容详细

1、HTML简介

2、如何创建及展示

3、head内常见标签

4、body内基本标签

5、特殊符号

6、常见标签

7、标签的两大重要属性

8、列表标签

9、表格标签

公告