前端之HTML02

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. 特殊符号

&nbsp; -- 一个代表一个空格

a &gt; b -- 大于号>
a &lt; b -- 小于号<

&amp;  -- 表示 & and

&yen;  -- 羊角符¥

&copy; -- 版权©️
&reg;  -- 商标®️

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:单元格横跨多少列(即合并单元格)
posted @ 2022-01-19 16:24  Joshua_jiaxue  阅读(44)  评论(0编辑  收藏  举报