前端之HTML
今日内容
- HTML简介
- HTML基本标签
- head 内基本标签
- body 内基本标签
- HTML常用符号
- HTML重要标签
- div 标签 与 a 超链标签 与 img 图片标签
- 列表标签
- 表格标签
内容详细
一、HTML简介
HTML: 超文本标记语言（Hyper Text Markup Language）
是构造网页的骨架，几乎所有的网站都是由HTML构建而成
不是一门编程语言 没有任何的逻辑 只有固定的标记功能
1、HTML标签的分类
1.双标签(有头有尾)
<a></a>
2.自闭合标签(单标签)
<img/>
2、HTML文档结构
<html>
<head>
编写给浏览器查看的内容
</head>
<body>
编写展示给用户查看的内容
</body>
</html>
3、HTML语法注释
单行注释： <!--注释语法-->
多行注释：
<!--
多行注释
多行注释
-->
4、创建HTML文件
存档网页骨架的文件后缀名一般都是.html，该类型文件主要的打开方式为浏览器形式
- 以pycharm为例
右键new点击HTML FILE创建即可 - 如何打开展示
右上方会提供多种浏览器(注意需要提前下载)
编写HTML标签的时候 不需要自己写大括号小括号 只需要写标签名称+tab键即可自动补全(所有支持编写html文件的工具内部自带的插件语法功能)
二、HTML基本标签
1、head内常见标签
title 定义网页标题
style 内部支持css代码
script 内部支持编写js代码 还可以通过src属性导入外部js文件
link 通过href属性引入外部的css文件
meta 定义网页源信息
keywords关键字搜索
description网页描述信息
<!--
在html文件中 可以编写html和css以及js
但是实际工作中三者其实是分开存放的 这样有利于后期维护和扩展
-->
2、body内基本标签
h1~h6 标题标签
p 段落标签
b 加粗
i 斜体
u 下划线
s 删除线
br 换行
hr 水平分割线
"""有时候相同的样式 可能有多种标签可以实现!!!"""
- 标签分类
分类1:单双标签
分类2:
块儿级标签 h1~h6 p --> 独占一行(后期可以通过css实现不占一行)
行内标签 u i s b --> 自身文本多大就占多大,不会换行
三、HTML常用符号
空格
> 大于号
< 小于号
& &符号
¥ 羊角符
© 版权符
® 注册
四、HTML重要标签
标签的两大重要属性
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>
1、div 标签 与 a 超链标签 与 img 图片标签
div 标签
网页在制作之前需要提前布局好
布局标签
div 块儿级标签
span 行内标签
a 超链标签
a标签>>>:链接标签
用法1:通过href属性指定网址(URL)点击跳转
跳转过程中有两种方式
1.当前页面跳转 target="_self" 默认
2.新建页面跳转 target="_blank"
用法2:锚点功能
通过href属性指定标签的id值点击即可跳转到对应位置
img 图片标签
img标签>>>:图片标签
src属性指定图片地址
可以是本地的地址也可以是网络上的地址
alt属性编写文本
用于在图片无法加载出来的情况下的提示信息
title属性写文本
用于鼠标悬浮在图片上之后提示的文本信息
height、width属性写像素
用于调整图片的尺寸
需要注意调整的时候 修改一个另外一个自动等比例缩放
如果同事调整两个 那么可能会造成图片的失真
注意
标签是可以嵌套的 但是需要遵循以下规律
块儿级标签 可以无限制的嵌套块儿级标签和行内标签
特例:p标签虽然是块儿级标签但是也不能嵌套块儿级标签
行内标签不能嵌套块儿级标签 可以嵌套行内标签
<!-- 网址其实并不是一个非常专业的名词
URL:统一资源定位符
-->
2、列表标签
无序列表（重要）
前面没有用于标识数字顺序的提示
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<!--
网页上有规则排列的多个横向或者竖向内容 几乎都是无序列表
要想实现需要css相关知识
-->
有序列表
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
3、表格标签
# 当需要展示一些具体固定格式的多条数据的时候可以考虑使用(excel)
# 表格标签的格式
<table>
<thead></thead> 表头
<tbody></tbody> 表单
</table>
# tr标签
tr就表示一行
# th标签
在表头的字段名称
# td标签
普通的单元格数据
<table>
<thead>
<tr>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>jason</td>
<td>123</td>
<td>18</td>
</tr>
</tbody>
</table>
"""我们只需要掌握最基本的html标签即可 至于花里胡哨的样式后面学习完前端框架之后 直接cv拷贝即可 都是别人提前写好的"""
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
