Day2前端学习之路——HTML基本知识
课程目标:
通过制作自己的简历,更加清楚地了解HTML是什么,HTML5是什么。学习基本的HTML标签,理解HTML语义化概念
任务一:回答问题
1.HTML是什么,HTML5是什么?
HTML是一种被广泛使用的用来创建网页的超文本标记语言。
HTML5是最新的HTML标准,拥有更丰富的语义、图形以及多媒体元素等内容。
2.HTML元素标签、属性都是什么概念?
HTML不是编程语言,是标记语言,所以要使用标记标签来描述网页
属性是用来提供HTML标签更多的信息。
3.文档类型是什么概念,起什么作用?
在第一行我们总会有<!DOCTYPE>
。这个<!DOCTYPE>
就是用来声明该文档的类型的,只有这样浏览器才能知道你的文件类型,然后正确的显示网页。在互联网上有许多不同的文档,只有了解文档的类型,浏览器才能正确的显示文档。提前声明文档类型可以帮助浏览器正确的显示网页,
4.meta标签都用来做什么的?
meta标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。
5.Web语义化是什么,是为了解决什么问题?
HTML的每个标签都有它特定的含义,web语义化是指使用语义恰当的标签,是页面具有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。
6.链接是什么概念,对应什么标签?
<a>元素可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。
7.常用标签都有哪些,都适合用在什么场景?
- body:在网页上要展示出来的页面内容一定要放在body标签中
- p:如果想在网页上显示文章,这时就需要p标签了,把文章的段落放到p标签中。标签的默认样式,段前段后都会有空白,如果不喜欢这个空白,可以用css样式来删除或改变它。
- span:标签是没有语义的,它的作用就是为了设置单独的样式用的。
- br:在需要加回车换行的地方加入br,br标签作用相当于word文档中的回车。在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入br。没有HTML内容的标签就是空标签,空标签只需要写一个开始标签,这样的标签有br、hr和img。
- div:在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个div标签中,这个div标签的作用就相当于一个容器。什么是逻辑部分?它是页面上相互关联的一组元素。如网页中的独立的栏目版块,就是一个典型的逻辑部分。用id属性来为div提供唯一的名称,必须唯一。
- img:插入图片,img src=”图片地址” alt=”下载失败时的替换文本” title = “提示文本” src:标识图像的位置;alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);图像可以是GIF,PNG,JPEG格式的图像文件。
8.表单标签都有哪些,对应着什么功能,都有哪些属性
Tags | Description | Attributes | Link |
---|---|---|---|
<form> |
定义表单 | action , autocomplete , method , etc. |
form |
<input> |
定义输入域 | autofocus , type , min , etc. |
input |
<textarea> |
定义textarea | autofocus , cols , form , required , etc. |
textarea |
<label> |
定义表单控件的名称 | for , form |
label |
<fieldset> |
定义fieldset | disabled , form , name |
fieldset |
<legend> |
为以下元素定义标题:<fieldset> 、<figure> 、<details> |
支持html5的事件和全局属性 | legend |
<select> |
标签创建下拉列表 | data , form , name , 'multiple', etc. |
select |
<optgroup> |
定义选项组 | lable , disabled |
optgroup |
<option> |
定义下拉列表中的选项 | lable , disabled , selected , value |
option |
<button> |
定义按钮 | name , disabled , autofocus , etc. |
button |
9.ol, ul, li, dl, dd, dt等这些标签都适合用在什么地方,举个例子
1). <ul>
无序列表:适用于只是列举一系列东西,但是没有轻重缓急或者先后顺序之分之分。比如说:我在写简历时候列举我的技能时候就可以用无序列表
2). <ol>
有序列表:适合于有先后顺序或者优先级的列表,比如说我列一下做意大利面的步骤,这个时候就有顺序而言了,需要用有序表阐述清楚步骤的先后顺序
3). <li>
定义列表项,<ul>
和<ol>
都是用它
4). <dl>
, <dt>
, <dd>
放在一起使用。<dl>
用来定义 定义列表,而<dt>
是用来定义定义列表中的每一项, <dd>
则是定义定义的描述信息。
任务二:理解web语义化
参考问题五的回答
任务三:制作简历
https://codepen.io/cttv2/pen/gObvBrv?editors=1100#0
Day2前端学习之路——HTML基本知识的更多相关文章
- Day3前端学习之路——CSS基本知识
课程目标 初步了解什么是CSS,掌握基本的CSS概念,语法,针对选择器特殊性的计算处理,以及学习如何设置一些简单的样式 任务一:回答问题 1.什么是CSS,CSS是如何工作的? CSS 指层叠样式表 ...
- 前端学习之路-CSS介绍,Html介绍,JavaScript介绍
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- web前端学习之路
test 随着自己对于web前端知识了解的越多,越来越发现自己真的好菜 一脸茫然阶段 两年前大学接触网页设计,那时对于网页设计一窍不通,只是看了一本自己大学编的一本入门教材,我甚至不知道那些网页设计的 ...
- Day1前端学习之路——概述
终于下定决心要好好学习前端知识了,以后会把学习过程中的一些随笔记录在这里.HTML.CSS.JavaScript这三大前端语言在大三的时候就有所接触,但是学习的不够深入,这一次希望能够坚持下去. 学习 ...
- 前端学习之路——scss篇
一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 二.安装和使用 Sass依赖于ruby环境,所以装sass之前先 ...
- 前端学习之路——Git篇
本文只是一个个人学习Git的笔记,如有错误的地方,还望指出,谢谢!参考资料如下: <Git教程--廖雪峰的官方网站 > bootstrap里面的--git_guide Git安装 在网上搜 ...
- 前端学习之路之SPA(单页应用)设计原理
SPA设计 1.设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离:前端做业务逻辑,后端处理数据和接口,耦合度减少,开发效率提高. 减轻服务器压力:一个 ...
- Day7前端学习之路——多栏布局
该文章主要讨论两栏布局和三栏布局,三栏布局包括很著名的圣杯布局和双飞翼布局 一.两栏布局的七种方法(左边固定,右边自适应) 原理: block水平元素宽度能够跟随父容器调节的流动特性,block级别的 ...
随机推荐
- 《Java核心技术》 JVM指令集
https://www.jianshu.com/p/bc91c6b46d7b
- 月薪30k的Java架构师JVM常见面试题解析
在做程序员的路上经常会遇到的JVM一些经典面试题,今天给大家分享出我自己的解题思路,希望对大家有帮助,后续有空会持续更新. 1.什么情况下会发生栈内存溢出. 思路: 描述栈定义,再描述为什么会溢出,再 ...
- Python知识体系框架 思维导图
技术文档已经独立整理! 请移步个人技术文档:https://anxiangchegu.github.io/technical-doc 如需更多Java.Python.大数据体系知识,请稳移步个人技术文 ...
- flask模板 flask-bootstrap
1.模板 a.block块中继承前面block块的内容,需要添加{{super()}} b.macro 宏: 作用:在模板中定义函数(定义函数->注意添加()->可以使用from 模板 ...
- flash-session
作用:更改session存储的位置 1.session默认存放在浏览器的cookie中 源码 wsgi->app.__call__->wsgi_app->push->self. ...
- Django 滑动验证
极验官网:https://www.geetest.com/ 文档: https://docs.geetest.com/ 查看 行为验证的部署文档
- Java电商支付系统实战(一)- 简介
现如今,支付成为热点 对于电商业务,这都是不可或缺的 核心功能剖析 下单->支付 nginx 将用户请求反向代理到我们编写的电商系统 = 下单 之后,点击支付跳转到支付系统,最后对接 通过跳转将 ...
- spring Cloud-eureka的保护模式
eureka的首页出现以下警告 EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. REN ...
- 个人任务day7
今日计划: 整合程序,排除错误. 昨日成果: 写注册界面.
- 实验一:通过Access划分vlan
1.配置图 Switch0的fa0/1.fa0/2.fa0/3端口设置为Access模式,PC1和PC2属于vlan 2,PC3属于vlan 3. 2.Switch0配置 3.实验现象 PC1可以pi ...