1. HTML简介
HTML是构造网页的骨架,几乎所有的网站都是由HTML构成的,
HTML:超文本传输标记语言
# 不是一门编程语言,没有任何的逻辑,只有标记功能。
"""
html标签的分类
1.双标签(闭合标签)
<a></a>
2.自闭合标签(单标签)
<img/>
"""
# HTML文档结构
<html>
<head>给浏览器看的
</head>
<body>给用户看的
</body>
</html>
"""在使用编程工具创建的时候,会自动编写文档结构"""
# HTML语法注释
<!--单行注释-->
<!--
多行注释
多行注释
-->
"""编写的时候编程工具也有快捷键"""
2. 如何创建及展示
"""
存放网页骨架的文件,后缀名一般都是.html
这类文件主要打开方式为浏览器
"""
1. 以pycharm为例
新建HTML file即可
2. 如何打开展示
右上方会提供多种浏览器(需提前下载好)
head标签里面,文本优先展示
3. head内常见标签
<meta charset="UTF-8">
<title>这是一个title</title>
title 定义网页标题
style 给标签编写css代码
script 内部支持编写JS代码
还可以通过src属性导入外部js文件
link 引入外部的css文件
meta 定义网页源信息
keyword关键字搜索
description网页描述性信息
"""
在html文件中,可以编写html,css,js
但是实际工作中,三者其实是分开存放的,这样有利于后期维护和扩展
"""
4. body内基本标签(核心)
h1 ~ h6 标题标签
p 段落标签
b 加粗
i/em 斜体
u 下划线
s 删除线
br 换行
hr 水平分割线
"""
有时候相同的样式,可能由多种标签可以实现
"""
"标签分类"
分类1:单双标签(闭合自闭合)
分类2:块级标签(独占一行)
h,p,div
后期可以通过css实现不占一行
内联标签(行内标签,根据文本大小决定)
a,b,i,em,u,s,span
5. 特殊符号
-- 一个代表一个空格
a > b -- 大于号>
a < b -- 小于号<
& -- 表示 & and
¥ -- 羊角符¥
© -- 版权©️
® -- 商标®️
6. 常见标签
# 网页在制作之前需要提前布局好
布局标签
div 块级标签
span 行内标签
"""
标签是可以嵌套的,但是需要遵循一下规律
块级标签可以无限制的嵌套块级标签和行内标签
特例:p标签虽然是块级标签,但是也不能嵌套块级标签
行内标签不可以嵌套块级标签,可以嵌套行内标签
"""
# 知识点扩展
页面布局的技巧:
先用div划分区域,之后再考虑填充具体内容
具体练习可以参考小米官网
# 1. a标签>>>:链接标签
用法1:通过href属性指定网址,点击跳转
跳转过程中有两种方式
1.当前页面跳转target="_slef"(默认)
2.新建页面跳转target="_blank"
用法2:锚点功能
通过href属性指定标签的id值,点击即可跳转到对应的位置
# 网址其实并不是一个非常专业的名字
URL: 统一资源定位符
# 2. img标签>>>:图片标签
# 单标签,自闭合标签
src属性指图片地址
可以是本地的地址,也可以是网络上的地址
alt属性当图片无法加载的时候,显示alt内的内容(提示性信息)
title属性当鼠标悬浮到图片上显示的内容
height
width
标签的两大重要属性
1. id属性 # 个体查找
类似于标签的身份证好,在同一个html页面上不能重复
2. class属性 # 群体查找
类似于python面向对象中类的继承
可以将多个标签划为一类
<h1 class="c1"></h1>
<p class="c1"></p>
并且一个标签可以有很多类
<h1 class="c1 c2 c4..."></h1>
7. 列表标签
1. 无序列表(掌握)
# 前面没有用于标识顺序的数字
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
"""
网页上有规则排列的多个横向或者竖向内容,几乎都是无序列表
想要实现需要css相关知识
"""
2. 有序列表(了解)
3. 标题列表(了解)
<dl>
<dt></dt>
<dt></dt>
<dt></dt>
</dl>
ul>li{$$$}*10
8. 表格标签
# 当需要展示一些具体固定格式的多条数据的时候可以考虑使用(excel)
<table border.. >
表头<thead>
一行<tr>
在表头中的字段名称
<th></th>
<th></th>
<th></th>
</tr>
</thead>
表单<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
"""我们只需要掌握最基本的html标签即可,
至于花里胡哨的样式,后面学习完前端框架之后,
直接cv拷贝即可,都是别人提前写好的"""
border:表格边框
cellpadding:内边距
cellspacing:外边距
width:像素百分比
rowspan:单元格竖跨多少行
colspan:单元格横跨多少列(即合并单元格)