Python后台开发基础--Web前端基础

最新推荐文章于 2024-01-20 14:25:27 发布

VIP文章宇航18611465354

最新推荐文章于 2024-01-20 14:25:27 发布

阅读量665

点赞数

分类专栏： Python闯关训练营笔记文章标签： python

本文链接：https://blog.csdn.net/weixin_44888486/article/details/107027389

版权

1 Html

1.1 Html介绍

HTML是 HyperText Mark-upLanguage 的首字母简写，意思是超文本标记语言，
HTML不是一种编程语言，而是一种标记语言
超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，
用这种语言制作的文件保存的是一个文本文件，文件的扩展名为.html或者.htm，
html文档也叫Web页面，其实就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，
如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。

1.2 Html语法

HTML是由：标签和内容构成
HTML标签（标记）的语法是由 < 和 > 括起来。
HTML标签有两种：双标签：<标签名>…</标签名> 和单标签：<标签名/>
HTML标签中还可以添加属性：<标签名属性名1=“值1” 属性名2=“值2”属性名n=“值n”>…</标签名>
HTML标签规范：标签名小写、属性使用双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，大不了不显示效果

1.3 Html结构

<!DOCTYPE html\> 
<html lang="en"\>     
    <head>       
        <meta charset="UTF-8"\>        
        <title\>网页标题\</title\> 
        <!-- 此处可以写各种页头属性设置、CSS样式和JavaScript脚本等... --> 
	</head> 
<body>
	网页显示内容 
</body> 
</html>

1.4 Html—Header

说明	代码
设置网页编码	`<meta charset="utf-8"/\>`
关键字	`<meta name="Keywords" content="关键字" /\>`
描述	`<meta name="Description" content="简介、描述" /\>`
网页标题	`<title\>本网页标题\</title\>`
导入CSS文件	`<link type="text/css" rel="stylesheet" href="\\.css"/\>`
CSS代码	`<style type="text/css"\>嵌入css样式代码\</style\>`
JS文件或代码	`<script \>。。。\</script\>`

1.5 Html注释

html文档代码中可以插入注释，注释是对代码的说明和解释

 <!-- 这就是唯一的一种HTML注释了 --\>

注:可以使用ctrl+/对选中内容进行快捷注释.

1.6 Html常用标签

1.6.1 title

<head> 
	<title>浏览器标题</title> 
<head/\>

1.6.2 标题与段落

<body\> 
<p>p标签<p\> 
<h1>h1<h1\> 
<h2>h2<h2\> 
<h3>h3<h3\> 
<h4>h4<h4\> 
<h5>h5<h5\> 
<h6>h6<h6\>
<body\>

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XxMNOuyU-1593432114611)(image/14d620bf2259f7473a42a9f8a451c88e.png)]

1.6.3 水平线与换行符

标签	命令
水平线	<hr/>
换行符	<br/>

1.6.4 常见的转义符

字符	代码
空格
>	>
<	<

1.6.5 a链接

1.6.5.1 格式

<a href=" "\>...\</a\>  超级链接标签

1.6.5.2 属性

href:指的是链接跳转地址
target: 表示链接的打开方式：
- _blank 新窗口
- _parent 父窗口
- _self 本窗口（默认）
- _top 顶级窗口
- framename 窗口名
title：文字提示属性（详情）

1.6.5.3 锚点连接

定义一个锚点：<a id="a1"></a>
使用锚点：<a href="#a1">跳到a1处</a>

1.6.6 图片 img

1.6.6.1 格式

<img /> 在网页中插入一张图片

1.6.6.2 属性

src：图片名及url地址
alt: 图片加载失败时的提示信息
title：文字提示属性
width：图片宽度
height：图片高度
border：边框线粗细

1.6.6.3 实例

<img src="img/img.png" alt="图片加载异常显示的文字" title="鼠标放在图片上显示的文字"/>

1.6.7 表格

1.6.7.1 属性

属性	说明
border	这个整型元素使用像素，定义了表格边框的大小。如果设置为1，表示表格具有1px大小的边框
width	表格的宽度
bgcolor	表格的背景颜色
align	这个属性指定了包含在文档中的表格必须如何对齐。有如下值: left，表格将在文档左侧显示； center，表格将在文档中央显示； right，表格将在文档右侧显示；
cellpadding	表格单元的内容和边框之间的空间
cellspacing	单元格之间空间的大小

1.6.7.2 标签

标签	说明
<table>…</table>	表格标志
<caption>…</caption>	表格标题
<tr>…</tr>	行标签
<th>…</th>	列头标签
<td>…</td>	列标签 : 跨行属性rowspan 跨列属性：colspan
<thead>…</thead>	表头
<tbody>…</tbody>	表体
<tfoot>…</tfoot>	表尾

1.6.8 列表

1.6.8.1 标签

标签	说明
ul	无序列表
li	列表项
ol	有序列表

1.6.8.2 实例

<ul> 
    <li>无序列表</li> 
    <li>无序列表</li>
</ul>
<ol> 
    <li

最低0.47元/天解锁文章

宇航18611465354

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Python后台开发基础--Web前端基础

1 Html1.1 Html介绍HTML是 HyperText Mark-upLanguage 的首字母简写，意思是超文本标记语言，HTML不是一种编程语言，而是一种标记语言超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为.html或者.htm，html文档也叫Web页面，其实就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将
复制链接

扫一扫