前端（一）

一.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:统一资源定位符
"""

2.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 c8 c9'></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>内容1</dd>
     <dd>内容2</dd>
     </dl>

九.表格标签

# 当需要展示一些具体固定格式的多条数据的时候可以考虑使用(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: 单元格横跨多少列（即合并单元格）

 

posted @ 2022-01-19 21:05  bug俱乐部  阅读(49)  评论(0)    收藏  举报