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特殊字符
HTML初始----day01的更多相关文章
- Python基础【day01】：初始模块（五）
本节内容 1.标准库 1.sys 2.os 2.第三方库 1.for mac 2.for linux Python的强大之处在于他有非常丰富和强大的标准库和第三方库,几乎你想实现的任何功能都有相应的P ...
- day01——python初始、变量、常量、注释、基础数据类型、输入、if
python的历史: 04年Django框架诞生了 内存回收机制是什么(面试题) python2:源码不统一,有重复的功能代码 python3:没有重复的功能代码 python是一个什么的编程语言 编 ...
- C++Primer笔记-----day01
=======================================================day01======================================== ...
- 计算机以及Python的初始
电脑的介绍 CPU:中央处理器,相当于人类的大脑 内存:暂时储存数据,速度快,造价高,断电后丢失 硬盘:长期储存数据.速度相对慢,造价相对低 操作系统:一个软件,连接计算机硬件和系统中的软件. Pyt ...
- 2DToolkit官方文档中文版打地鼠教程（一）：初始设置
这是2DToolkit官方文档中 Whack a Mole 打地鼠教程的译文,为了减少文中过多重复操作的翻译,以及一些无必要的句子,这里我假设你有Unity的基础知识(例如了解如何新建Sprite等) ...
- CSharpGL(38)带初始数据创建Vertex Buffer Object的情形汇总
CSharpGL(38)带初始数据创建Vertex Buffer Object的情形汇总 开始 总的来说,OpenGL应用开发者会遇到为如下三种数据创建Vertex Buffer Object的情形: ...
- ArrayList、Vector、HashMap、HashSet的默认初始容量、加载因子、扩容增量
当底层实现涉及到扩容时,容器或重新分配一段更大的连续内存(如果是离散分配则不需要重新分配,离散分配都是插入新元素时动态分配内存),要将容器原来的数据全部复制到新的内存上,这无疑使效率大大降低. 加载因 ...
- linux系统下使用xampp 丢失mysql root密码【xampp的初始密码为空】
如果在ubuntu 下面 使用xampp这个集成开发环境,却忘记mysql密码. 注:刚安装好的xampp的Mysql初始密码是空... 找回密码的步骤如下: 1.停止mysql服务器 sudo /o ...
- python基础之初始python
初始python之基础一 一.Python 介绍 1.python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发 ...
- openfire 初始密码
openfire 初始密码 mssql2014 进入数据库,找到 ofUser 表 ,将密码字段对应的密文替换为下面的内容,则密码就是 admin ecbd03623cd819c48718db1b27 ...
随机推荐
- Springboot下micrometer+prometheus+grafana进行JVM监控的操作过程
Springboot下micrometer+prometheus+grafana进行JVM监控的操作过程 背景 同事今天提交了一个补丁. 给基于Springboot的产品增加了micrometer等收 ...
- React数据通信父传子和子传父的使用
组件中的props 在react中,props的特点是: 1.可以给组件传递任意类型的数据 2.props是只读的对象,只能够读取属性的值,无法修改对象 如过我们强行修改数据,会报错,告诉我们该属性是 ...
- 关于async函数的错误处理
1. 关于async函数的错误处理 有些时候,我们请求的接口可能会报错: 从而导致后面的代码无法去执行: 这样就会造成页面上某些状态出错! 那么怎么样才能 既能捕获到错误 还能让代码往后面执行呢 2. ...
- package.json中^,~的详细说明
场景描述 在package.json这个文件中,我们经常可以看见这样的信息 但是我们很少注意的是 版本前面的 ^ 到底是什么意思 今天我们就来讲一下(端好小板凳) "dependencies ...
- 压缩软件 WinRAR 去广告
别去中国的那个代理网站下载 去国外的官网下载英文版或者湾湾版的, 这样用网上的rarreg.key文件方式就没有广告了, 不然中国的就是有广告. 这里是湾湾版的链接: https://pan.baid ...
- 微信小程序-Storage
官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html ?> Sto ...
- Milvus 2.3.功能全面升级，核心组件再升级，超低延迟、高准确度、MMap一触开启数据处理量翻倍、支持GPU使用！
Milvus 2.3.功能全面升级,核心组件再升级,超低延迟.高准确度.MMap一触开启数据处理量翻倍.支持GPU使用! 1.Milvus 2.3版本全部升级简介 Milvus 2.3.0 不仅包含大 ...
- 【八】强化学习之DDPG---PaddlePaddlle【PARL】框架｛飞桨｝
相关文章: [一]飞桨paddle[GPU.CPU]安装以及环境配置+python入门教学 [二]-Parl基础命令 [三]-Notebook.&pdb.ipdb 调试 [四]-强化学习入门简 ...
- C/C++ 反汇编：多维数组与指针
反汇编即把目标二进制机器码转为汇编代码的过程,该技术常用于软件破解.外挂技术.病毒分析.逆向工程.软件汉化等领域,学习和理解反汇编对软件调试.系统漏洞挖掘.内核原理及理解高级语言代码都有相当大的帮助, ...
- “I/O多路复用”和“异步I/O”的前世今生
曾经的VIP服务在网络的初期,网民很少,服务器完全无压力,那时的技术也没有现在先进,通常用一个线程来全程跟踪处理一个请求.因为这样最简单.其实代码实现大家都知道,就是服务器上有个ServerSocke ...