python进阶之路

Day15

hello world！今日是python学习的第十五天，今天开始对前端进行基础的学习，今日主要内容为：html基础语法，标签，文本标签，列表，图片与超链接的设置方法，表格标签的学习，不规则表格的制作，web标准等。

1 html基础语法

1.1 什么是html？

​ Hyper Text Markup Language - 超文本标记语言
​ 标记语言 - 在不同的文本前加不同的标记，让文本的意义和功能不同，如：markdown、html
​ html大小写不敏感：htmlHtmlHTML==hTMl（小写与大写的功能一样）

1.2 标签 - 就是标记，不同的标签功能不一样

​ 标签是html的基本结构，不同的标签功能不一样

​ 双标签（标准标签）：<标签名 属性=属性值 属性1=属性值1。。。>标签内容</标签名>
​ 单标签：<标签名 属性=属性值 属性1=属性值1。。。> 或者 <标签名 属性=属性值 属性1=属性值1。。。/>

​ 说明：
​ a.<>和/ - 固定写法
​ b.标签名 - 不是程序员自己命名，有哪些标签名是html规定好的，那些标签是双标签，那些是单标签固定好的。
​ 注意：标签名前后不能随意添加空格
​ c.属性 - 以属性=属性值的形式存在，多个属性之间用空格隔开。不同的标签有哪些属性是确定的。
​ 属性值不管是什么值都必须放在“”中
​ d.标签内容 - 双标签开始标签和结束标签中间的部分就是标签内容；
​ 标签内容很灵活可以是独立的文本，也可以是一个标签，还可以是多个标签或者多个标签和文本的组合。

1.3 标签的分类

1）从可见性来分

​ 可见标签：p标签、a标签、img标签
​ 不可见标签：meta标签、tyle标签、script标签、link标签。。。

2）head中的标签和非head中的标签（body标签）

​ head中标签：meta、title、style、link、script、base
​ body标签：p、a、b、img、table、ul、ol、li等等、style、link、script、base

2 html中的标签

​ head中可以使用的标签：meta、title、link、style、script、 base
​ meta标签 - 网页元数据，主要用来对网页进行基本设置，包括：设置文本编码方法，设置网页搜索关键字，网页简介，网页类
​ title标签 - 网页标签
​ link标签 - 导入外部文件（导入图片作为网页图标，导入外部样式表）

2.1 link标签的使用

​ rel属性 - 设置导入文件的作用。stylesheet：外补样式表 icon：网页图标
​ type属性 - 指定导入文件的类型和后缀。文件类型/文件后缀名
​ text/css：导入一个后缀是.css的文本文件
​ image/png：导入一个后缀是.png的图片文件
​ href属性 - 设置被导入的文件的路径

2.2 文件路径的写法

​ 1）绝对路径：文件在计算机中的全路径
​ 2）相对路径：
​ 使用.表示当前目录（当前写代码的文件所对应的目录地址）：
​ . - 表示当前目录
​ 如： https://blog.csdn.net/huixinheart/article/details/img/2.jpg
​

​ 使用…表示当前目录的上层目录

head中的标签

3 文本标签

3.1 标题标签：h1~h6

​ 如果文本的意义是标题的时候就选标题标签

3.2 段落标签:p

​ 一个段落就对应一个p标签

3.3 其他的普通文字标签：font、span

​ size属性 - 设置字体大小
​ color属性 - 设置字体颜色

3.4 文本效果相关的标签和符号

​ html中手动敲回车无用，手动添加空格也没用；
​ 如果需要在内容中加换行，需要添加<br>标签。
​ 如果需要在内容中加空格，需要使用html符号：&nbsp - 空一格像素 &emsp； - 空一个空格
​ 加粗：b标签、strong标签（有强调的意思）
​ 倾斜：i标签、em标签（有强调的意思）

学习使我快乐

我爱你

我恨你

吃饭，睡觉，打豆豆

喝水，喝酒，喝啤酒

为什么我要这么饿，饿死我了

我的老天啊 | 我好帅啊 发布时间：08-1011：52

    明月几时有
把酒问青天
不知天上宫阙
今夕是何年  我欲乘风归去

作者：苏轼

4 列表

1.无序列表：ul-li
ul标签 - 表示整个容器
li标签 - 列举容器中的所有元素，个数和元素的个数一致
【python，java，h5，ui，测试】

1. 有序列表：ol - li
   ol - 表示整个列表
   li - 表示列表中的元素

3.自定义列表：dl-dt-dd
dl - 表示整个列表
dt - 分类
dd - 每个分类中的元素

• python

python主要是提供人工智能和数据分析的解决方案

• java
• h5
• ui
• 测试

麻辣小龙虾的做法

1. 用刷子将小龙虾刷干净，并且将头部剪掉
2. 准备材料：辣椒、花椒、老姜、蒜、啤酒、火锅底料
3. 炒料：火锅底料加辣椒、花椒等
4. 加小龙虾继续炒
5. 加啤酒焖煮

高中学科

理科

生物

物理

化学

文科

政治

历史

地理

综合

数学

语文

英语

网络学习 厨艺学习 高中学习 ### 5 图片与超链接

1.图片标签：img
a.src属性 - 图片地址，
可以是本地图片的相对路径；也可以是网络图片地址
b.title属性 - 设置图片标题；鼠标悬停在图片上的时候才会显示
c.alt属性 - 图片加载失败的提示信息

2.超链接 a
1）标签内容 - 超链接可点击可看见的部分
2）href - 跳转目的地
a.网页的地址 - 直接跳转到指定的网页
b.本地的html文件路径 - 直接打开html文件对应的页面。
c.id选择器（在id属性值前加#号） - 将当前页面滚动到id选择器指定的位置。
d.空 - 刷新（重新加载页面）
3）target属性 - _self（默认值），在当前页面中加载新的页面
_blank,在新的窗口中加载新的页面

学习练习

6 表格标签

1) 表格标签：table-tr-td

​ table标签 - 表示整个表格
​ tr 标签 - 表示一行
​ td 标签 - 表示一个单元格

table：
border属性：设置边框线的宽度
cellspacing属性：设置单元格和单元格之间的间隙
bgcolor属性：设置整个表格的背景颜色
width属性：设置整个表格的宽度
height属性：设置整个表格的高度
cellpadding属性：设置内容与表格的间距
align属性：left/right/center 设置整个表格在网页中的居中方式
tr：
bgcolor属性：设置表格一行的背景颜色
height属性：设置整个一行的高度
align属性：设置一行中所有的单元格内容居中
td：
bgcolor属性：设置单元格的背景颜色
width属性：设置td所在的列的宽度
align属性：设置指定单元格中内容的对齐方式

姓名	年龄	性别（男或者女）
张三	28	男
李四	20	女

2) 不规则表格制作实例

​ colspan属性：列的合并
​ rowspan属性：行的合并

姓名	胡歌	性别	男	出生年月	1982年9月20日
籍贯		民族	汉族	身体状况
政治面貌		身高		外语程度
毕业学校	上海戏剧学院	专业
毕业时间		联系电话
家庭住址		邮政编码
E-mail
主修课程
教育经历
熟悉软件
个人特点
个人特长和能力
自我评价

7 web标准

1.web标准
w3c针对网页开发指定了web标准：
1）结构标准 - html，负责网页内容的显示1.5
2）表现标准 - css，负责网页内容的样式和布局2.5
3）行为标准 - JavaScript，负责网页内容的变化6

2.结构标准 - html（超文本标记语言）
1）网页内容： 文字、图片、超链接、输入框、按钮、。。。、视频、音频、flash等。
2）网页结构：整个网页是一个html标签，html中有head和body两个兄弟标签
html标签 - 表示整个网页
head标签 - 表示网页的顶部
body标签 - 表示网页内容部分

设置当前页面的文本编码方式：utf - 8（支持中文文字编码） gbk（windows默认）