• 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.表单标签都有哪些,对应着什么功能,都有哪些属性

    TagsDescriptionAttributesLink
    <form> 定义表单 actionautocompletemethod, etc. form
    <input> 定义输入域 autofocustypemin, etc. input
    <textarea> 定义textarea autofocuscolsformrequired, etc. textarea
    <label> 定义表单控件的名称 forform label
    <fieldset> 定义fieldset disabledform , name fieldset
    <legend> 为以下元素定义标题:<fieldset><figure><details> 支持html5的事件和全局属性 legend
    <select> 标签创建下拉列表 dataform , name, 'multiple', etc. select
    <optgroup> 定义选项组 labledisabled optgroup
    <option> 定义下拉列表中的选项 labledisabled, selectedvalue option
    <button> 定义按钮 namedisabled, 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

  • 相关阅读:
    做技术选型时,要注意些什么?
    .net core 实现默认图片
    启用跨源请求 (CORS)
    使用 Cookie 而无需 ASP.NET 核心标识的身份验证
    Windbg+Procdump解决w3wp.exe CPU过百问题
    .NET Core 2.0 Cookie中间件 权限验证
    想要学习设计模式,你得先会看类图,一张图读懂UML
    ef core
    Dapper MySql DateTime 异常
    简单理解Socket
  • 原文地址:https://www.cnblogs.com/ccv2/p/12168447.html
Copyright © 2020-2023  润新知