HTML简介

一、HTML简介

HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成
HTML:超文本标记语言
# 不是一门编程语言没有任何的逻辑只有固定的标记功能
"""

HTML标签的分类

1.双标签（有头有尾）

<a></a>

2.自闭标签(单表签）

<img/>

#HTML文档结构

<html>

<head>编写给你浏览器看的内容</head>

<body>编写展示给用户看的内容</body>

</html>

''' 在使用编程工具创建的时候就会自动编写文档结构'''

HTML语法注释

<!--

多行注释

-->

在编写的时候，编写工具也有注释的快捷键 ctrl+?

二、如何创建及展示

“”“ 存档网页骨架的文件后缀一般都是HTML

该类型的文件主要的代开方式为浏览器

”“

1.以pycharm为例
右键new点击HTML FILE创建即可
2.如何打开展示
右上方会提供多种浏览器(注意需要提前下载)

# 编写HTML标签的时候不需要自己写大括号小括号只需要写标签名称+tab键即可自动补全(所有支持编写html文件的工具内部自带的插件语法功能)

head内常见标签
title  定义网页标题
style  内部支持css代码
script 内部支持编写js 代码  还是可以通过src属性导入外部的js 文件
link    通过href 属性引入外部的css文件
meta  定义网页的源信息
keywords 关键字的搜索
description 网页描述信息

”“”在HTML文件中可以编写HTML和css以及js

　　但是实际工作中三者其实是分开存放的这样有利于后期的维护与扩展

“‘”

BODY 内的基本标签

h1~h6    标题标签
p            段落标签
b            加粗
i            斜体
u            下划线
s            删除线
br        换行
hr        水平分割线
"""有时候相同的样式 可能有多种标签可以实现!!!"""

标签分类
    分类1:单双标签
  分类2:
        块儿级标签        h1~h6 p
          独占一行(后期可以通过css实现不占一行)
      行内标签        u i s b
          自身文本多大就占多大

特殊符号

&nbsp   空格
&gt       大于号
&lt       小于号
&amp   &符号
&yen    羊角符号
&copy   版权符号
&reg     注册

常见的标签

网页在制作之前需要提前布局好
布局标签
div   块级标签
span  行内标签
"""
标签是可以镶嵌的   但是需要遵循以下的规律  
块级标签可以无限制的嵌套块级标签和行内标签
"""

"""
特例p标签虽然是块级标签但是也不嫩给嵌套块级标签
行内标签不能嵌套块级标签，但是可以嵌套行内标签
知识扩充
     页面布局的技巧
        先用div划分区域 之后在考虑填充具体的内容
            可以参考小米官网练习技巧
"""

1、a标签>>>链接标签
用法1:通过href属性的指定网址（url)点击跳转
    跳转过程有两种方式
    1.当前页面跳转   target = ”—self"默认
2、 新建页面跳转   target="_blank"
用法2：描点功能
    通过href属性指定标签的Id值 点击即可跳转到对应的位置
"""网址其实并不是一个非常专业的名词
URL：统一资源定位符
"""
img标签》》》图片标签
src属于指定图片地址
可以是本地地址也可以是网络上的地址
alt属性编写文本
用于图片上无法加载出来的情况下的提示信息
title属性写文本
用于鼠标悬浮在图片上之后提示文本信息
height width  属性写像素
用于调整图片的的尺寸
需要注意调整的时候  修改一个另外一个自动等比例缩放
如果同时调整两个有可能造成图片失真

标签的两大重要属性

1、id属性   个体查找
类似于标签的身份证号码  在同一个HTML页面上id不能重复
2、 class属性  群体查找
类似于python面向对象中的类的继承
可以将多个标签划分为一类
<h1  class="c1"></h1>
<p class="c1”></p>
并且一个标签有很多类
<h1 class=“c1 c2 c3"></h1>
<p class="c1 c2 c3 ”></p>

列表标签

1、无序列表
#前面没有用于标识数字顺序的提示
<ul>
<li>111</li>
<LI>222</LI>
<li>333</li>
</ul>
"""
网页上有规则排列的多个横向或者竖向内容  几乎是无序的列表
想要实现需要css相关知识
2、有序列表
<ol>
<li>111</li>
<LI>222</LI>
<li>333</li>
</ol>
3、标题列表
<dl>
<dt>标题1</dt>
    <dd>内容1</dd>
<dt>标题2</dt>
    <dd>内容2</dd>
</dl>

表格标签

当需要展示一些具体固定格式的多条数据的时候还可以考虑使用（excel）
#表格标签的格式
<table>
<thead></thead>表头
<tbody></tbody>
</table>
#tr标签
tr就表示一行
#th标签
th标签在标头的字段名称
#td标签
普通的单元格数据
<table>
    <thead>
         <tr>
            <th>姓名</th>
            <th>密码</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>json</td>
        <td>123</td>
        <td>19</td>
    </tr>
    </tbody>
</table>
"""
我们需要掌握的最基本的HTML标签即可  至于花里胡哨的样式后面学习完前端框架之后  直接cv 拷贝即可  都是别人提前写好的
""" 
border:  表格边框
cellpadding:  内边距
cellspacing: 外bianju
width:  像素  百分比（最好通过css来设置长宽）
rowsoan: 单元格竖跨多少行
colspan:  单元格横跨多少列（即合并单元格）

posted @ 2022-02-08 21:41 红绿灯的黄呀阅读(125) 评论(0) 编辑收藏举报

刷新页面返回顶部

森雾

胖胖无敌