HTML初始----day01
1.HTML骨架标签总结
标签名 定义 说明
html标签 页面中最大的标签,称为根标签 <head></head> 文档的头部 注意在head标签中我们必须要设置的标签是title <title></title> 文档的标题 让页面有一个属于自己的网页标题 <body></body> 文档的主体 元素包含文档的所有内容,页面内容 基本都是放到body里面的2.HTML标签分类
2.1常规元素(双标签)
<标签名>内容</标签名> 比如我是爸爸
2.2空元素(单标签)
<标签名/> 比如
换行的意思
3.HTML标签关系
3.1嵌套关系 父子关系 子元素最好缩进一个tab键
<head> <title></title> </head>3.2并列关系 兄弟关系
<head></head> <body></body>3.HTML常用标签
3.1排版标签
排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签
3.1.1标题标签h(熟记)
单词缩写: head 头部.标题 title 文档标题
共分为6个等级的标题 依据总要性递减
标题文本
标题文本
标题文本
标题文本
标题文本
标题文本
3.1.2段落标签p (熟记)
单词缩写 paragraph 段落
语义:把html文档分为若干段落
文本内容
3.1.3水平线标签hr (认识)
创建网页水平线横线的标签
是单标签
3.1.4换行标签br (熟记)
如果希望某段文本强制换行显示,就需要使用换行标签
单标签
3.1.5 div和spn标签(重点)
div spn 是我们网页布局主要的两个盒子
div就是division的缩写 分区的意思 其实有很多div来组合网页
spn 跨度 跨距 范围
语法格式:
div标签 用来布局,但是现在一行只能放一个div 一行显示一个
spn标签 用来布局,一行上可以放好多个spn 显示在一行
3.2文本格式化标签(熟记)
标签 显示效果
文字以粗体方式显示(xhtml推荐使用strong)
文本以斜体方式显示(xhtml推荐使用em)
文本以加删除线方式显示(xhtml推荐使用del)
文本以加下划线方式显示(xhtml不赞成使用u)
3.3标签属性
使用html制作网页时,如果想要让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法
<标签名 属性1="属性值1" 属性2="属性值2" ...>内容</标签名>
<手机 颜色="红色" 大小="5寸">内容</手机>
3.4图像标签img(重点)
单词缩写 : image
语法:
<img src = "图像URL" />
该语法中src属性用于指定图像文件的路径和文件名,它是img标签的必须属性
<img />标记属性
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时替换显示的文本内容
title 文本 鼠标悬停时显示的内容
width 像素 设置图像的宽度
height 像素 设置图像的高度
border 数字 设置图像的边框宽度
3.5链接标签(超链接)
语法:
<a href='跳转目标' target='目标窗口的弹出方式'>文本或图像</a>
属性 作用
href 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功 能
target 用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值, _blank为在新窗口打开
<a href="https://www.baidu.com" target='_blank' >你点我一下试试</a>
注意:
1.外部链接 需要添加:http://www.baidu.com
2.内部链接 直接链接内部页面名称即可,比如<a href='index.html'>首页</a>
3.如果当时没有确定链接目标时,通常将连接标签的href属性值定义为“#”(即href="#")表示该链接暂时定为一个空链接
4.综合案例 圣诞
5.拓展阅读
5.1锚点定位(难点)
通过创建锚点链接,用户能够快速定位到目标内容
创建锚点链接分为两步:
1.使用相应的id名标注跳转目标的位置(找目标)
<h3 id='two'>目标地址</h3> 你需要跳到哪个部分然后给那个部分一个标识id,找到的目标人
2.使用<a href="#id名">链接文本</a>创建链接文本(被点击的)(拉关系)我也有一个姓毕的姥爷
<a href="#two">链接地址</a> 跟人创建一个标识id,然后点击链接可以找到那个人
5.2 base标签
语法:<base target="_blank" /> 单标签
在<head></head>标签中写入
作用是给所有需要创建链接的标签新建一个窗口,方便了当需要创建很多链接的时候,每个a标签都要写target="_blank",这时只要在head体中写入一个base标签就可以了
5.3 预格式化文本pre标签(了解用的少)
<pre>标签可定义预格式化的文本。
被包围在
标签元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。<pre> 此列演示如何使用pre标签 对空行和空格 进行控制 </pre>
5.4特殊字符
-------------------------------------------
个性签名:代码过万,键盘敲烂!!!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,博主在此感谢!