前端学习随笔2 在线简历（前端简历模块）
sinye56 2024-10-28 19:12 3 浏览 0 评论
?一 心得体会
今天的任务是利用HTML制作一份在线简历，先不考虑样式，只从结构和语义化方面着手。对于已经有了前端b编程经验的我来说挺简单的，但是我还是当作我是一个刚入门的菜鸟，在学习过程中发现其实还有很多基础知识被我忽略了，例如meta的强大功能，HTML5表单新增的输入类型，列表标签dl、dt、dd等，这提醒这我不要眼高手低，要潜心学习，稳固基础。
二 相关知识点
问题1 HTML是什么，HTML5是什么？
- HTML是一个超文本标记语言（Hyper Text Markup Language），其有一套标记标签，使用这些标记标签来描述网页。
- HTML5是最新的HTML标准，新增了一些元素，API，同时也删除了部分旧元素，具体可以看相关文档。相较于 HTML4来说，HTML5最大的改进就是新增了强大的图像支持（<canvas>和 <svg>），多媒体支持（<video> 和 <audio>）和API，使得其能独自完成以前需要其他语言辅助的工作。
问题2 HTML文档是什么？
HTML文档其实就是我们看到的网页，其包含HTML标签和纯文本。
问题3 HTML元素、标签、属性都是什么概念？
- HTML标签是由尖括号包围的关键词，表示其在HTML文档中的含义。元素标签通常成对出现（<p></p>），也有单独出现（<img>）；成对出现的标签第一个为开始标签（或开放标签），第二个为结束标签（或闭合标签），结束标签多了一个/。
- HTML元素是指从开始标签到结束标签的所有代码（<p>包含标签和此文本</p>）。注意：如果元素内没有文本，可以直接在开始标签进行关闭（<p/>）
- HTML属性相当于HTML元素的修饰符，为该元素提供相应的特性。属性通常以键值对的形式出现（name="value"），并且都是出现在开始标签中。
问题4 文档类型是什么概念，起什么作用？
HTML经历过多个版本的更新，每个版本中元素不尽相同，那么我们如何才能使计算机准确知道当前的版本并正确显示HTML页面呢？为了解决这个问题，引进了文档类型的概念。在HTML文档首行使用<!DOCTYPE>来声明该HTML文档的版本，如果版本为HTML5，那么声明代码为<!DOCTYPE html>；如果为HTML4，那么声明代码为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"。目前创建新网页都尽量使用HTML5的文档类型，维护旧网页可以沿用旧网页的文档类型。
问题5 meta标签都用来做什么的？
meta标签位于HTML头部，携带元信息，不显示在页面上，对于计算机是可读的。其主要作用有以下几点：
- 声明当前文档所使用的字符编码
<!--声明文档使用的字符编码--> <meta charset="utf-8">
- 注意：鼓励使用UTF-8字符编码，不使用不兼容ASCII的编码规范，必须禁用CESU-8, UTF-7, BOCU-1或 SCSU这些字符，因为其被证实存在跨站脚本攻击（XSS）的风险。
- 携带相关信息关联到HTTP头部
- 此处需要用到http-equiv和content属性
<!--告诉计算机6s后跳转相应地址-->注：http-equiv的属性值content-language, content-type, set-cookie已经弃用，请查看最新文档使用替代方案
示意代码如下：
< Meta HTTP-EQUIV="refresh" content="6; url=地址" >
- 使用name属性携带相关信息
<!--以下为常用属性值-->示意代码如下：
<!--标注作者--> < Meta name="author" content="前端唠唠嗑" > <!--携带关键字，便于搜索网站收录，提高搜索排名--> < Meta name="keyword" content="关键字" > <!--文档描述，便于搜索网站收录，提高搜索排名--> < Meta name="descript" content="描述内容" >
问题6 Web语义化是什么，是为了解决什么问题
我理解的语义化有两方面：1. 便于计算机识别HTML内容，降低其处理难度，提高效率，与此同时还能搜索程序更好更快的搜索到此文档；2. 便于程序员理解代码以及后期维护——结构良好，语义明确的代码利于阅读和维护。
问题7 链接是什么概念，对应什么标签？
超链接的含义是一个点击跳转相应文档的字，词或者图像。对应的为<a>标签。其使用方式如下。
- 通过href属性跳转到另一个HTML文档
<a href="地址">跳转到相应的地址</a>
- 跳转文档内的锚点（书签）
<!--通过name属性创建文档内的锚点--> <a name="tips">设定的锚点</a> <!--通过href属性跳转文档内的锚点--> <a href="#tips">跳转锚点</a>
- 注意：创建锚点时可以用id来替代name属性，也可以用其他元素标签替代a标签。
- 跳转另一个文档的锚点
<a href="地址#tips">另一个文档的锚点</a>
问题8 常用标签都有哪些，都适合用在什么场景？
- 块级元素：<div>——外框, <p>——段落, <h1>——标题, <ul>——列表, <table>——表格
- 行内元素：<span>——提示性文字,<a>——链接, <b>——加粗, <img>——图像,<td>——表格单元
问题9 表单标签都有哪些，对应着什么功能，都有哪些属性？
表单一般包裹在<form>标签下，主要用于用户输入，获取用户输入的信息并传输给服务器。其输入类型有以下几种：
- 文本
- 单行文本输入 <input type="text">
- 多行文本输入 <textarea name="message" rows="10" cols="30"></textarea>
2.密码（输入的字符会做掩码处理） <input type="password">
- 单选
<input type="radio" name="sex" value="male" checked>Male <input type="radio" name="sex" value="female">Female
- 注：当input的type为radio时，该输入框为单选框，若单选框的name值相同，那么他们是同一组选项，不能同时选取到。
- 多选
<input type="checkbox" name="vehicle" value="Bike">I have a bike <input type="checkbox" name="vehicle" value="Car">I have a car
- 注：当input的type为checkbox时，该输入框为单选框，若单选框的name值相同，那么他们是同一组选项，可以同时选取到。
- 按钮
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
- 注：点击可以执行相关操作
- submit
<input type="submit" value="Submit">
- 此输入类型用于提交表单到服务器
- HTML5新增输入类型（<input type="新增类型" >）
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。
问题10 ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方，举个例子
ol搭配li构建有序列表，ul搭配li构建无序列表，dl，dd，dt不常用，看了一下介绍dl类似于ol和ul，属于最外层标签；dd类似于li，表示项目内容；而dt类似于序号，只不过内容可以自定义。由以上可以看出dl，dd，dt挺适合做菜单类列表，dt表示菜名，dd表示相应菜品的介绍。
?
相关推荐
- Linux在线安装JDK1.8
-
首先在服务器pingwww.baidu.com查看是否可以连网然后就可以在线下载一、下载安装JDK1.81、在下载安装的同时做好一些准备工作...
- Linux安装JDK，超详细
-
1、了解RPMRPM是Red-HatPackageManager（RPM软件包管理器）的缩写，这一文件格式名称虽然打上了RedHat的标志，但是其原始设计理念是开放式的，现在包括OpenLinux...
- Linux安装jdk1.8(超级详细)
-
前言最近刚购买了一台阿里云的服务器准备要搭建一个网站，正好将网站的一个完整搭建过程分享给大家！#一、下载jdk1.8首先我们需要去下载linux版本的jdk1.8安装包，我们有两种方式去下载安装...
- Linux系统安装JDK教程
-
下载jdk-8u151-linux-x64.tar.gz下载地址：https://www.oracle.com/technetwork/java/javase/downloads/index.ht...
- 干货|JDK下载安装与环境变量配置图文教程「超详细」
-
1.JDK介绍1.1什么是JDK?SUN公司提供了一套Java开发环境，简称JDK(JavaDevelopmentKit)，它是整个Java的核心，其中包括Java编译器、Java运行工具、Jav...
- Linux下安装jdk1.8
-
一、安装环境操作系统：CentOSLinuxrelease7.6.1810(Core)JDK版本：1.8二、安装步骤1.下载安装包...
- Linux上安装JDK
-
以CentOS为例。检查是否已安装过jdk。yumlist--installed|grepjdk或者...
- Linux系统的一些常用目录以及介绍
-
根目录（／）：“／”目录也称为根目录，位于Linux文件系统目录结构的顶层。在很多系统中，“／”目录是系统中的唯一分区。如果还有其他分区，必须挂载到“／”目录下某个位置。整个目录结构呈树形结构，因此也...
- Linux系统目录结构
-
一、系统目录结构几乎所有的计算机操作系统都是使用目录结构组织文件。具体来说就是在一个目录中存放子目录和文件，而在子目录中又会进一步存放子目录和文件，以此类推形成一个树状的文件结构，由于其结构很像一棵树...
- Linux文件查找
-
在Linux下通常find不很常用的，因为速度慢（find是直接查找硬盘），通常我们都是先使用whereis或者是locate来检查，如果真的找不到了，才以find来搜寻。为什么...
- 嵌入式linux基本操作之查找文件
-
对于很多初学者来说都习惯用windows操作系统，对于这个系统来说查找一个文件简直不在话下。而学习嵌入式开发行业之后，发现所用到的是嵌入式Linux操作系统，本想着跟windows类似，结果在操作的时...
- linux系统查看软件安装目录的方法
-
linux系统下怎么查看软件安装的目录？方法1：whereis软件名以查询nginx为例子...
- Linux下如何对目录中的文件进行统计
-
统计目录中的文件数量...
- Linux常见文件目录管理命令
-
touch用于创建空白文件touch文件名称mkdir用于创建空白目录还可以通过参数-p创建递归的目录...
- Linux常用查找文件方法总结
-
一、前言Linux系统提供了多种查找文件的命令，而且每种查找命令都具有其独特的优势，下面详细总结一下常用的几个Linux查找命令。二、which命令查找类型：二进制文件；...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- oracle忘记用户名密码 (59)
- oracle11gr2安装教程 (55)
- mybatis调用oracle存储过程 (67)
- oracle spool的用法 (57)
- oracle asm 磁盘管理 (67)
- 前端 设计模式 (64)
- 前端面试vue (56)
- linux格式化 (55)
- linux图形界面 (62)
- linux文件压缩 (75)
- Linux设置权限 (53)
- linux服务器配置 (62)
- mysql安装linux (71)
- linux启动命令 (59)
- 查看linux磁盘 (72)
- linux用户组 (74)
- linux多线程 (70)
- linux设备驱动 (53)
- linux自启动 (59)
- linux网络命令 (55)
- linux传文件 (60)
- linux打包文件 (58)
- linux查看数据库 (61)
- linux获取ip (64)
- 关闭防火墙linux (53)