CSS和HTML的基础知识(一)——HTML常用标签的简介及用法
在学习css和HTML过程中,我们会遇到各种各样的标签以及标签属性,并且由于标签的多样性,也使得同一个样式或者同一块区域内容,实现的方式有很多种,这也就造成了代码的多样性。也可以确切的说,我们在新建一个网页的过程中,由于每个人想法的不同,实现方式就会存在多样性。但是,不管使用哪种方法,我们唯一的目的就是建好一个网站。因此,我们在创建网站过程中,基础知识点的合理运用尤为关键。
我们首先要了解,一个网页是由多种标签堆合而成的,这里面便存在:基本标签、基本行级标签、基本块级标签。如果我们将网页进行划分的话,我们会很清楚的发现,网页其实就是由许多块级标签进行区域分割,再由行级标签进行内容填充。当然这里面还包含了一些浮动、定位等一些基本语法,这一讲主要讲解基本标签的使用。
对于新接触者来讲,各种标签的熟悉记忆也显得尤为重要。
从写法上来看,HTML标签可分为“成对标签”和“自闭和标签”。“成对标签”标签成对出现,有开始标签,必须要有结束标签,内容包含在两个标签之间。
从功能上,HTML标签科分为块级标签和行级标签。二者基本的区别在于:
(1)块级标签自动换行,前后隔一行;行级标签不会自动换行,从左往右依次排序。
(2)块级标签默认宽度为100%,行级标签宽度由里面的文字撑开。
(3)块级标签可以设置宽高、内外边距,行级标签不能设置(在没有设置其他属性的前提下)
常用的标签:
link标签,常用于将网页与其他文件进行连接。其中rel属性表示去即将连接的文件与当前网页的关系。
link标签用于将网页和其他文件进行连接。
rel="icon" rel属性表示即将连接的文件,与当前网页的关系。 属性值选择icon表示即将连接的文件,是当前网页的图标。
rel 是标签的属性 "icon" 是标签的属性值,属性值必须用引号引起来。
href="" 表示所要连接的图片地址。
figure:图片组合标签。用于将图片与下方的标题进行包裹,图片使用img表示,标题使用figcaption表示。
div:网页制作过程中最常用的块级标签,可以包裹任何标签。
img:图片标签。图片所在的路径,我们通常使用的是相对路径,
(1)网络图片地址。不建议使用,网络路径
(2)使用图片在本地的绝对路径,严禁使用。因为使用file://协议引入的图片,
由于网页使用的http协议,所以无法访问图片,但是如果将网址改为file://协议
(3)使用相对路径,推荐使用的唯一目录
当图片在当前文件的下一层时,使用“文件名/图片名”表示;
当图片与当前文件在同一文件夹下,使用图片名表示;
当图片在当前文件的上一层时。使用“../图片名” 注:../表示返回上层
注意: 1,图片必须包含在项目里面,不可以退出项目根目录。
2,width height 图片的宽度高度
3,title 当鼠标指上图片后显示的文字
4,alt 当图片无法加载时显示的文字,如果省略alt,则图片无法加载时显示title的文字
5,align:图片两边的文字相对于图片的排列方式
top 文字居上 ;center 文字居中;bottom 文字居下
a标签:超链接标签
(1)href属性:超链接即将跳转的页面,可以是网络地址,也可以是本地的html;
(2)target属性:设置页面打开的位置。_self 当前页面打开(为默认)_blank在新页面打开
(3)title:当鼠标点上后显示打的文字
功能性连接:
1,mailto:<a href="mailto://18364316836@163.com">1111</a>
2,tencent:与指定qq聊天
<a href="tencent://message/?uin=412988805">1111</a>
3,锚链接:点击超链接跳转到页面的指定位置(锚点)
a,在页面的指定位置设定一个锚点
<a name="top"></a>
b,将超链接的href属性设置为“#锚点名称”
<a href="#top">点我回到顶部</a>
c,跳转到其他页面的指定位置
常见的引用标签:blockquote、q、cite
区别:
(1)从显示效果上blockquote是块级标签且整段缩进;q显示为加引号;cite为倾斜
(2)从功能上:blockquote用于引用一整段内容;q用于引用一句话;cite通常用于书画、作品名引用
以上为我所总结的常用的基本标签,不是很详细,不过在学习HTML过程中会遇到许多各种功能性的标签,因此,学习HTML其实就是一个不断积累的过程。
转载于:https://www.cnblogs.com/Code-ccc/p/8596799.html
CSS和HTML的基础知识(一)——HTML常用标签的简介及用法相关推荐
- 3dmax基础知识:3dmax常用功能详解,零基础小白的福音
你收藏了那么多教程,却不知道3dmax怎么入门?掌握3dmax常用功能是3dmax入门的基础之一,今天就为您盘点了一些3dmax最常用到的功能和使用方法,快来和小编一起学习3dmax入门基础知识吧! ...
- 计算机基础知识WORD7,计算机基础知识:Word常用操作(7).doc
计算机基础知识:Word常用操作(七) [导语]在事业单位考试中,计算机专业知识的复习向来是考生复习备考阶段的一大重点,河南人事考试网为计算机基础知识的复习为考生提供知识点梳理,帮助考生备考! 一.打 ...
- JS一起学01:css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序
一.html/css 1. 什么是盒子模型? padding+border+width/height 2. float 浮动 (1)浮动的特性 脱离文档流 行内 ...
- 【重识 HTML + CSS】网页基础知识、基本 HTML 标签
重识 HTML + CSS 网页的基础知识 网页的显示过程 缓存(cache)技术 浏览器内核 常用 HTML 元素 DOCTYPE 文档说明 html 元素:根元素 lang 属性 head 元素: ...
- IC基础知识(4)电源管理简介:稳压器IC
文章目录 写在前面 正文 线性与开关 线性稳压器 开关稳压器 其他类型的功率IC 结论 写在前面 原文链接:Introduction to Power Management: Voltage Regu ...
- kettle对字符串去除空格_整理|ABAP基础知识二:常用字符串处理
常用字符串处理 上一期整理了ABAP的数据类型和定义,今天我们整理一下开发过程中常见的字符串处理命令.虽然说这些基础知识对于已经熟练使用Ctrl c + Ctrl v的资深码农来说过于简单.但是对于一 ...
- Javascript基础知识之四(常用数组方法)
一.MDN链接 Array - JavaScript | MDNJavaScript的 Array 对象是用于构造数组的全局对象,数组是类似于列表的高阶对象.https://developer.moz ...
- 机器视觉基础知识/经典系统/常用领域以及机器视觉常用的图像处理库
[0-定义] **计算机视觉:**一门研究如何使机器"看"的科学,更进一步的说,就是指用摄影机和计算机代替人眼对目标进行识别.跟踪和测量等机器视觉,并进一步做图像处理,用计算机处理 ...
- 计算机ppt操作知识,计算机基础知识:PPT常用操作(三)
[导语]在事业单位考试中,计算机专业知识的复习向来是考生复习备考阶段的一大重点,其中中公事业单位考试网为计算机基础知识的复习为考生提供知识点梳理,帮助考生备考! 一.快速选择多个对象 在powerpo ...
最新文章
- [Nginx] Nginx 配置location总结
- 熟练掌握python是什么概念-想要熟练掌握Python元组?你需要了解这10件应知事项...
- jquery地址栏链接与a标签链接匹配添加样式!
- 2021阿里巴巴大数据技术公开课第一季:外部工具连接SaaS模式云数仓MaxCompute实战
- 使用JGroups进行ElasticMQ消息复制
- 【Python】五子棋项目记录
- College student reflects on getting started in open source(二)
- 弹性地基梁计算程序 注册机_详解抗滑桩类型、设计及计算方法
- mysql 日志大小_查看mysql日志文件大小和数据库大小
- 山东省第八届acm大赛 G题 (SDUT 3899)
- 【Android开发笔记】4.简单基站定位程序
- canvas里 阿里云服务器oss图片跨域处理
- python 绘制折线图与柱状图
- 如何给厂区做导航地图?智能工厂导航地图解决方案公司
- 苹果教你如何开发iOS应用
- Tita OKR:目标地图的妙用
- 实例演示如何在公共互联网构建overlay实现SDWAN
- iOS 第三方dSYM定位BUG
- 未来计算机硬件发展趋势是什么,未来计算机硬件发展趋势
- AnswerOpenCV(0826-0901)一周佳作欣赏