【HTML01】HTML基础-基本元素-附带案例-作业

HTML 概述

英文全称:Hyper Text Markup Language

中文:超文本标记语言,就将常用的50多个标记嵌入在纯文本中,实现超文本效果的语言。

超文本:在纯字符中嵌入样式、图片、音频、视频、超链接等内容

标记也称为标签,如:

<div>hello</div>

注意:作为一门计算机语言,HTML与Java、C、PHP不同,没有循环、选择等基本语言结构,只有纯文本和标签。

学HTML到底学什么

学50多个常用的标签,和它们的用法(写法、语法)

HTML的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

HTML的注释的作用

<!--注释内容-->
快捷键:ctrl+/
  1. 说明这行代码是干嘛的,给程序员看的,人
  2. 不让代码执行 给机器看的

html的语法

(1)一篇HTML文档就是一个文本文档,其中包含 “纯文本”+“标签”
(2)HTML中的标签分为两种:
    双标记标签: <标签名>内容</标签名>
    单标记标签: <标签名 />    单标记标签中不能包含内容
(3)标签之间可以嵌套,但不能交叉。块状元素可以嵌套行内元素,反之不行(XTHML)
(4)标签名不区分大小写,但有个版本的HTML要求全小写,推荐全用小写
(5)标签可以声明属性,属性有属性名和属性值,属性值需要使用单引号或双引号括起来
(6)不同的标签具有不同的属性,所有的标签都具备下列四个属性:
    -id:整个文档每个标签可以声明一个唯一的id号
    -style:为元素指定CSS样式
    -class:指定元素所属的类型
    -title:指定标签的弹出式提示语
    id,class可以随便写,但是写英文、数字、下划线、-。等学了css就有用了
    style,写样式的,不能乱写,只能写以后要学的样式,按规范来 
    title里面可以乱写,表示鼠标悬浮时的提示信息

W3C标准(http://validator.w3.org/)

W3C是html标准的制定组织,编写的html可以通过打开以上链接进行校验

HTML的常用标签:

标签都有一定的语义化,不同的标签用来表示或放置不同的内容。

1、标题标签(header)

<h1></h1>
<h6></h6>

2、段落标签(paragraph)

<p></p>

3、换行标签(break row)(主要用于文字换行中)

<br>

4、水平线标签(horizon)

<hr>

5、块级标签(division)

 <div></div>

使用频率非常高,但是没啥语义化的标签,主要是用来划分区域的

是块级标签的代表,当你不知道要用何种标签包裹内容时,就用它

6、行内标签的代表(span: 桥墩)

<span></span>

使用频率非常高,但是没啥语义化的行内标签,主要是用来分割包裹某些内容,方便加样式等

7、文本格式化标签(双标记、行内标签)

a. 加粗

   1. 要加粗的文字  单词: bold
   2. 要加粗的文字
   区别:(面试题)
    外观都一样,都是将文字加粗
    b标签仅仅只是将文字加粗
    strong表示内容的强调,意思是该文字很重要

b. 斜体

   1. 要变斜体的文字  
   2. 要变斜体的文字 //已经被废弃了
    i===> italic
   区别:(面试题)
    外观都一样,都是将文字变斜体
    i标签仅仅只是从外观上变斜体,不强调内容
    em表示内容的强调,意思是该文字很重要

c. 下划线

   1. 要添加下户线的文字 --被废弃了
    u===> underline
   2. 下划线
    ins===>insert  插入

d. 删除线

   要添加删除线的文字
   del===>delete

8、链接

   <a href="url地址:路径">链接</a>
   a===>anchor  锚点 
   作用:跳转页面
   外观:蓝色+下划线
   属性:href  资源引用地址  是a链接的属性,该属性的值是网址
   url地址:相对路径、绝对路径

   其他作用:
    1.链接
    2.下载
    3.锚点

   属性2:target="_blank"  
    作用:希望让链接在新窗口中打开,则添加该属性
   <a href="url" target="_blank">链接</a>
   url:网址,官方:统一资源定位符
   blank:新窗口、空白
   target:目标

9、列表

用于实现新闻列表、产品列表、电影列表、菜品列表。。。

       1.有序列表(排名分先后,会有数字的)
       <ol>
           <li>列表1</li>
           <li>列表2</li>
           <li>列表3</li>
       </ol>
       ol里面有li标签组合而成。同时出现,不能拆分,ol只能有一个,li标签可以写多个
       ol===> order list
       li===> list item 列表项

       属性:
        type="1|a|A|i|I"  排序的符号
        start="5"  排序开始的数字
       2.无序列表(排名不分先后,没有数字)
       <ul>
           <li>列表1</li>
           <li>列表2</li>
           <li>列表3</li>
           ...
       </ul>
        type="disc|circle|square"  排序的符号
              实心小圆点|空心圆|正方形
       属性:
        type="disc|circle|square"
       注意:
        ol,ul里面只能放li标签,不能放其他的,但是li标签中可以放任意的标签

       3.自定义列表(没啥存在感)
       <dl>
           <dt>自定义列表的标题</dt>
           <dd>自定义列表项</dd>
           <dd>自定义列表项</dd>
       </dl>   

10、图片标签(image)

第一个多媒体标签(超文本)

<img src="图片的路径url">

HTML中的路径:(url)

url:统一资源定位符

../  表示上一级
直接写文件夹  表示同级目录
文件夹/文件夹/  下一级目录

<img src="img/re.jpg"> //同级目录下的img文件夹下的re.jpg

<img src="机器猫.jpg"> //同级目录中找

<img src="../111.jpg">//往上一级找111.jpg

<img src="../html/img/01.jpg"> //往上一级找到html下的img文件夹下的01.jpg文件

相关单词

  1. b,strong,em,i,del,ins,a,target

  2. type 类型

  3. start 开始

  4. HTML相关标签就相当于是一个个的单词,只是部分是简写的

参考资料

HTML 标签参考手册 – 功能排序:https://www.w3school.com.cn/tags/html_ref_byfunc.asp

如需本次课作业、笔记、案例等,请在下方加作者微信获取。

【HTML01】HTML基础-基本元素-附带案例

除特别声明外, 本站所有内容皆为原创,未经许可,禁止转载。转载时请务必以超链接形式标明文章出处和作者信息
  • 139
(0)
打赏 微信扫一扫 微信扫一扫
                       

关于作者:

web前端老罗

贡献:已经在WEB前端圈发表90篇文章了

简介:前端老罗是一位拥有多年web前端开发经验、管理经验、教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。加我微信:imqdcnn可提供开发、技术咨询、答疑、直播讲座等服务

Ta的专栏 | Ta的站点 | 其他SNS

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关于WEB前端圈

我是前端人(imqd.cn)愿景是不管你是想学习前端还是一名专业的WEB前端工程师在这里都能找到你想要的物料。定位为前端人学习进步的一个平台。在这里你能找到前端学习笔记、教学视频资源、案例、前后端分离、前端框架、低代码平台、可视化数据、多端开发、全栈开发等跟前端有关的一切资源!

关于站长:WEB前端老罗(罗老师)是一位拥有多年web前端开发经验、管理经验、IT培训教学经验的实战派全栈工程师。目前在某名企任职WEB前端技术教官。右边加我微信可提供开发、技术咨询、答疑、直播讲座等服务

WEB前端圈二维码

右边添加老罗微信一对一免费私聊
拉你加入官方微信答疑群

To top