前端与HTML | 青训营笔记

肆忆
75 阅读3分钟

前端与HTML | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第1天

一、HTML(HyperText Markup Language) 超文本标记语言

DOM树

image.png

HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐使用双引号包裹
  • 某些属性值可以省略，比如required、readonly
  1. 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  1. 列表标签
    1. 无序列表
    <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
    1. 有序列表
    <ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>
    1. 描述列表
    <dl>
    <dt>歌名</dt>
    <dd>《鸡你太美》</dd>
    <dt>作者</dt>
    <dd>ikun</dd>
</dl>
  2. 链接标签
<a href="https://www.bytedance.com/">
  字节跳动官网
</a>
<!-- 在新标签页打开链接 -->
<a href="https://www.bytedance.com/" target="_blank">
  字节跳动官网
</a>
  1. 图片标签
<img
  src="图片路径"
  alt="提示信息"
/>
  1. 音频标签
<audio 
  src="音频路径"
  controls
></audio>
<!-- controls 显示音频控件 -->
  1. 视频标签
<video
  src="视频路径"
  controls
></video>
<!-- controls 显示视频控件 -->
  1. 输入标签
<input type="???" />
<!-- 
    type="text"           文本输入框
    type="radio"          单选框
    type="checkbox"       多选框
    type="email"          限制用户输入必须为email类型
    type="url"            限制用户输入必须为url类型
    type="date"           限制用户输入必须为日期类型
    type="time"           限制用户输入必须为时间类型
    type="month"          限制用户输入必须为月类型
    type="week"           限制用户输入必须为周类型
    type="number"         限制用户输入必须为数字类型
    type="tel"            手机号码
    type="search"         搜索框
    type="color"          生成一个颜色选择表单
    type="file"           提交文件
-->

语义化

  • 概念
    • HTML中的元素、属性及属性值都拥有某些含义
    • 开发者应遵循语义来编写HTML
      • 有序列表用ol，无序列表用ul
      • lang属性表示内容所使用的语言
  • 好处
    • 代码可读性
    • 可维护性
    • 搜索引擎优化
    • 提升无障碍性

二、CSS(Cascading Style Sheets)层叠样式表

  • 作用
    • 用来定义页面元素的样式
      • 设置字体和颜色
      • 设置位置和大小
      • 添加动画效果
  • 工作原理

image.png

  • 选择器

    选择器代码表示
    通配选择器*表示所有元素
    标签选择器h1表示h1元素
    类选择器.box表示class为box的元素
    id选择器#box表示id为box的元素
    属性选择器a[title]表示有title属性的a元素
    伪类选择器ul:first-child表示ul元素的第一个子元素
    伪元素选择器p::after表示往p元素后面插入
    后代选择器div span表示div元素里面的span元素
    子代选择器div > span表示div元素里面的子代span元素
    相邻兄弟选择器h1 + p表示h1元素紧挨的兄弟p元素
    通用兄弟选择器h1 ~ p表示h1元素的兄弟p元素

  • 样式继承

    某些属性会自动继承其父元素的计算值，除非显示指定一个值
    xxx:inherit;显示继承

  • BFC

    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

  • Flex Box

    • 可以控制子级盒子
      • 摆放的流向
      • 摆放顺序
      • 盒子宽度和高度
      • 水平和垂直方向的对齐
      • 是否允许换行
    • display:flex
      • 常见父项属性
        • flex-direction:设置主轴的方向
        • justify-content:设置主轴上的子元素的排列方式
        • flex-wrap:设置子元素是否换行
        • align-items:设置侧轴上的子元素的排列方式（单行）
        • align-content:设置侧轴上的子元素的排列方式（多行）
      • 常见子项属性
        • flex:子项目占的份数
        • align-self:控制子项自己在侧轴的排列方式
        • order:定义子项的排列顺序（数值越小越靠前）

  • float浮动

    • float:none/left/right
      • 脱离标准普通流的控制移动到指定位置
      • 浮动的盒子不再保留原先的位置
      • 具有行内块元素特点
      • 未设定宽度，宽度由内容多少决定
      • 文字会围绕浮动元素显示，而不是压住文字
    • 清除浮动

      • 额外标签法(隔墙法) 在浮动元素末尾添加一个空标签(必须是块级标签)，例如：<div style="clear:both"></div>

      • 父级添加overflow属性 overflow:hidden/auto/scroll

      • 父级添加after伪元素

        .clearfix:after {
                    content:"";
                    display:block;
                    height:0;
                    clear:both;
                    visibility:hidden;
                }

      • 父级添加双伪元素

        .clearfix:before,.clearfix:after {
                    content:"";
                    display:table;
                }

.clearfix:after {
        clear:both;
           }

  • 定位position

    • static 静态定位
    • relative 相对定位
    • absolute 绝对定位
    • fixed 固定定位
    • sticky 粘性定位 行内元素添加相对或绝对定位可以直接设置高度和宽度
      块级元素添加相对或绝对定位，如果不给宽度或高度，默认为内容的大小
avatar
文章
阅读
粉丝