前端与HTML|青训营笔记

玩犊子
104 阅读8分钟

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

前端与HTML|青训营笔记

u=1249278042,2406965749&fm=253&fmt=auto&app=138&f=JPEG.webp

一.什么是前端？

什么是前端“前端”：一切用户能够看到的东西、产生交互的东西、都是前端负责的

  • 解决GUI人机交互问题

  • 跨终端：PC/移动浏览器、客户端/小程序、VR/AR等

  • Web技术栈 扩展：前端开发行业介绍

    前端开发的前身是“网页制作”，随着移动端的兴起和4G、5G计数的普及，互联网产品业务越来越复杂，在2011年前后、逐渐蜕变为前端开发

    前端开发的变革：

    2016年前后，以webpack为代表的node.js工具流工具使前端开发的开发形式产生了翻天覆地的变化，并且随着Vue.js/React.js诞生，使前端开发进入了框架时代

    大前端时代(全栈)：

    前端开发领域：web开发、移动web开发、App开发、小程序开发、服务端开发等等

二.前端技术栈

HTML(内容)+CSS(样式)+JAVAScript(行为)-->(网络协议)-->服务器端

三.前端应该关注哪些方面？

功能、美观、安全、性能、无障碍、兼容、体验

补充：文档类型声明DTD

  • HTML文件第一行必须是DTD（Document Type Definition,文档类型声明）
  • 不写DTD会引发浏览器的一些兼容问题
  • 不同版本的HTML有不同的DTD写法 扩展：W3C组织

W3C（The world wide web consortium,万维网联合会）是万维网的主要国际标准组织。该联盟成立 于1994年，负责制定web标准，主要是HTML和CSS

四.HTML是什么？

  • HyperText:图片、标题、链接、表格 等等
  • Marup Language（标记语言）: 标签

认识HTML骨架.PNG

lang属性.PNG 补充：HTML叫做“超文本标记语言”，超文本标记就是标签

一般标签是成对出现的 但在HTML4代，但标签必须写一个结尾的反斜杠，HTML5不用写

    举例：HTML4	 <meta charset="UTF-8">
	  HTML5	 <meta charset="UTF-8" />

五.DOM树结构

DOM.webp

document--><html>--><head>--><meta>(<title>)
document--><html>--><body>--><h1>(<p>)

六.HTML语法规范

  • 标签和属性不区分大小写,推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐使用双引号包裹
  • 某些属性值可以省略，比如required、readonly

七.语义化是什么?

1. HTML中的元素、属性及属性值都拥有某些含义

2. 开发者应该遵行语义化来编写HTML

  • 有序列用ol；无序列用ul
  • lang属性表示内容所使用的语言

3. 语义化的好处：

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

4. 如何做到语义化

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不可使用可视化工具生成代码

八.谁在使用我们写的HTML

  • 开发者-修改、维护页面
  • 浏览器-展示页面
  • 搜索引擎-提取关键词、排序
  • 屏幕阅读器-给盲人读写页面内容

九.自学前端时写的笔记

列表标签

  • 表格是用来显示数据的，那么列表就是用来布局的
  • 列表的特点：整齐、有序，作为布局更加方便自由
  • 列表分为三大类：无序列表、有序列表、自定义列表
1.无序列表（重点）

    <ul>标签表示html页面中的无序列表，一般会以项目符号呈现列表项，而列表项用<li>标签定义
        无序列表语法:
            <ul>
                <li>列表项1</li>
                <li>列表项2</li>
                <li>列表项3</li>
            </ul>
    无序列表的各个列表项之间没有顺序级别之分，是并级的
    <ul></ul>中只能嵌套<li></li>,不能直接在<ul></ul>标签中输入其他标签或者文字
    <li></li>可以放其他元素
    无序列表自带样式，但实际使用我们使用CSS来设置

2，有序列表
    在html中,<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项
    有序列表语法:
        <ol>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ol>
    <ol></ol>中只能嵌套<li></li>,不能直接在<ul></ul>标签中输入其他标签或者文字
    <li></li>可以放其他元素
    有序列表自带样式，但实际使用我们使用CSS来设置

3.自定义列表
    在html中，<dl>标签标签用于定义描述列表（或定义列表），该标签会与<dt>(定义项目/名字)和<dd>（描述每一个项目/名字）一起使用
        <dl>
            <dd>名词1</dd>
            <dd>名词2</dd>
            <dd>名词3</dd>
        </dl>   

    <dl><dl>标签里面只能放<dt>和<dd>
    <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>

表格标签

表格的基本语法

(1).
<table>
        <tr>
            <tr>单元格内的文字</tr>
            ....
        </tr>
        ...
    </table>

1.<table></table>是用来定义表格的标签。
2.<tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。
3.<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4.字母td指表格数据（table data）,即数据单元格的内容。

(2).表头单元格
<th>标签表示HTML表格的表头部分（table head的缩写）
    特点：居中加粗显示

(3).表格属性
    属性名          属性值                     描述
    align          (left、center、right)      规定表格相对元素的对其方式。
    border         1或""                      规定表格单元格是否拥有边框，默认""，表示没有边框
    cellpadding    像素值                     规定单元边沿与其文字之间的空白，默认1像素
    cellspacing    像素值                     规定单元格之间的空白，默认2像素
    width          像素值或百分比              规定表格宽度
    height         像素值或百分比              规定表格高度

(4).表格结构标签
    1.<thead></thead>用于定义表格的头部, <thead>内部必须拥有<tr>标签，一般位于第一行
    2.<tbody></tbody>用于定义表格的主题，主要用于放数据本体
    3.以上标签都是放在<table></table>标签中

(5).合并单元格
    1.  跨行合并:rowspan="合并单元格的个数"
        跨列合并:colspan="合并单元格的个数"
    2.目标单元格：（写合并代码）
        跨行：最上侧单元格为目标单元格，写合并代码
        跨列: 最左侧单元格为目标单元格，写合并代码

表格总结：
    表格相关标签 
            table 标签   tr行标签   td表头标签  thead表格头部标签   tbody表格内容标签

表单标签

表单标签（收集用户信息） 一个完整的表单由表单域、表单控件（表单元素）、提示信息 三个部分组成

1.表单域
    表单域是包含表单元的区域
    在HTML标签中<form>标签用于定义表单域，以实现用户信息的收集和传递
    <form>会把他范围内的表单元素信息提交给服务器
    <form action="url地址" method="提交方式" name="表单域名称">
        各种表单元素控件
    </form>

    常用属性:
        属性        属性值       作用
        action      url地址      用于指定接收并处理表单数据的服务器程序的url地址
        method      get/post     用于设置表单数据的提交方式，其取值为get或post
        name        名称          用于指定表单的名称，以区分同一个页面中的多个表单域

表单控件（表单元素）
    1.input（用于收集用户信息）
        <input>是一个单标签，包含一个type属性。输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、多按钮等）
        <input type="属性值"/>

        type属性值:
            属性值      描述
            button      定义可点击按钮（多数形况下，用于通过javascript启动脚本）
            checkbox    定义复选框
            file        定义输入字段和浏览按钮供文件上传
            hidden      定义隐藏的输入字段
            image       定义图象形式的提交按钮
            psssword    定义密码字段，该字段中的字符被掩码
            radio       定义单选按钮
            reset       定义重置按钮
            submit      定义提交按钮，发送到服务器
            text        定义当行输入的字段，用户可在其中输入文本，默认宽度为20个字符
            
            属性        属性值          描述
            name        由用户定义      定义input元素的名称
            value       由用户定义      规定input元素的值
            checked     checked        规定input元素首次加载时应当被选中
            maxlength   正整数          规定输入字段中的字符的最大长度
                （1）name和value是表单元素都有的属性值，主要给后台人员使用
                （2）name表单元素的名字，要求单选按钮和复选框要有相同的name值

    2.label标签
    <label>标签为input元素定义标注(标签)
    <label>标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上来增加用户体验

        语法：
            <label for="sex">男</label>
            <input type="radio" name="sex" id="sex" />
            核心:<label>标签的for属性应当与相关元素的id属性相同

    3.select表单元素
        使用场景：在页面中如果有多个选项让用户选择。select标签控件定义下拉列表。
        语法：
            <select>
                <option>选项1</option>
                <option>选项1</option>
                <option>选项1</option>
                ...
            <select/>

    4.textarea表单元素
        文本框
        语法：
        <textarea rows="3" cols="20">
         文本内容
        </textarea>
        
        cols="每行中的字符",rows="显示的行数",在实际开发中不会使用，都是用CSS来改变大小
avatar
文章
阅读
粉丝