第一章 初识HTML
第一章 初识HTML
学习HTML:
开发网页、微信小程序、跨端界面开发、web游戏
hyper text markup language 超文本标记语言
网页的源码,解释和执行
w3c:万维网联盟//负责制定和维护web行业标准
内容和表现要分离,内容:HTML,表现:CSS
<html>
<head>
<!--一般用来声明一些信息-->
<meta charset="UTF-8">
<title>我的第一个网页</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
</body>
</html>
1.3HTML元素分类
块级元素:独占一行,不与其他并列
行级元素:宽和高不能自己设定,和其他并列
标题元素语法:<h1>标题<h1>
<h6>标题<h6>
段落元素语法:<p>...<p>特点:P标签里边不能嵌套块级标签,能嵌套行级标签
<hr/>//分割线 size//设置高度 width//设置宽度
块级标签2:
块标签的特点:
1.块标签单独占一行
2.高度、行高、外边距内边距都可以控制
3.宽度默认是容器的100%
4.可以容纳内联标签和其他块标签
常用的块标签:
h1写上主标题语义作用
h2二级标题
p标签,表示段落语义,如果设置宽度小于文字本身宽度,文字转行显示
<div>我什么语义都没有,可以把我看成一个盒子,一个块,一个容器<div>
使用示例:
<div>//父元素,可以写格式内容
<h1>文字内容<h1>
<h2>文字内容<h2>
<p>文字内容<p>
</div>
//父元素,包含下面的元素
<ul>标签:
无序列表
<ul type=circle//=square//disc//更改前面的默认格式>//无序列表
<li>苹果<li>
</ul>
去除前面默认点的方法
<style>
ul:
{
list-style: none;
width:500px;
height:500px;
background:pink;
}
</style>
<ul>里面不能包含其他,只能包含<li>,
<li>套用任何其他语句可以,<li>不能够单独使用
1.无序列表
2.和 li 标签配合使用
3.ul的子元素只能是 li ,不能是其他内容
4.li标签里面可以放其他签, li的父元素只能是或ol标签
5.1i标签是块标签,表示列表项
6.ul里面的列表项前面会有默认的点状在的开始签里加 type =“ circle 圆圈, square 方形, disc 点状”
7.ul里默认的点状去掉:
在 style 里面设置 list - style : none ;
<ol>
<ol type="a" reversed>
<li>告白气球</li>
<li>你要快乐</li>
<li>姐姐真漂亮</li>
</ol>
1.有序列表
2.块标签
4.ol里面只能放 li 标签,不能放其他内容
5.ol里的列表项前面会有默认的数字想改变数字,可以在 ol的开始标签里加 type ="” a A I
6.想去掉前面的数字在 style 里面设置 list - style : none
7.前面的序号改变顺序
在 ol标签的开始标签里加 reversed
<dl>定义列表,多了个小标题
<dl>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dt>肉类</dt>
<dd>猪肉</dd>
</dl>
1.定义列表,是和dt,dd标签配合使用的
2.dt表示列表标题
3.dd表示列表项,dd是对dt的解释和说明
4.dl是dt和dd的父元素,dl 只能放dd和dt,但是dt和dd可以放其他元素
5.dt和dd是兄弟元素
6.dl,dt,dd都是跨元素
行级标签:
文字加粗:<strong>文字内容<strong>不具有语义化功能
文字倾斜:<em>文本内容<em>
在行级标签中,空格和换行不起作用,一般写在块级标签p里面
要写空格要用到;代表一个空格
<pre></pre>标签,
<pre>
原样输出标签
class test{
public static void main()
}
</pre>
<br>标签 换行标签 默认行间距
和p标签不同,p和p之间换行是段落之间的换行
图片
<img src="图片地址">
网站图片一般支持使用png,比较好做透明,jpg图片格式比较大,
设置属性的时候默认单位为px像素
align的三个属性: top,middle,bottom
<img src="data:images/japan.jpg" align="top" alt="这里是日本富士山" width="300" title="这里是日本富士山">
这里是图片之后的文字
超链接,行级标签
target属性:
_self点击链接后,在当前界面显示新链接
_blank 在新打开的页面中显示链接对应的页面内容
_parent 在父框架中显示
_top不管嵌套几层容器,始终在顶层容器中显示衔接页面,
自己命名,实现在框架业中显示指定额链接
<div>
<!--内嵌框架页面-->
<iframe src="http://www.baidu.com" width="100%" height="800" frameborder="0"></iframe>
</div>
正在上传…重新上传取消
<span>文本</span>最小的行级标签,一般里面不加其他标签,
主要是用来设置格式样式
<span style="color:red;outline:black solid 1px;"></span>
特殊符号
结构和样式分离,w3c提倡的web结构,语义化
a, span,img 标签常用
实体: 一定要加分号!
第一章 初识HTML相关推荐
- 第一章 初识Mathematica
第一章 初识Mathematica 1.Mathematica是什么 Matematica是由美国Wolfram公司研究开发的一个著名的数学软件,它提供了非常强大的功能,能够完成符号运算.数学图 ...
- 《起跑吧,Opa》 -- 中译本 第一章 初识Opa
第一章 初识opa 本章,你将初识opa.你将学习如何安装Opa,编写opa程序以及熟悉Opa开发周期中的各个步骤. 安装opa 需要你预先从opa网站(http://opalang.org/)下载适 ...
- 第一章 初识EmguCV
第一章 初识EmguCV 1.1 EmguCV的基本介绍 1.1.1 计算机视觉.OpenCV和EmguCV 计算机视觉是一门研究如何使机器"看"的科学,更进一步的说,就是是指用摄 ...
- 第一章 初识OpenHarmony
序言 本书以3W1H教学法对每个知识点进行多维度介绍,笔者认为这样写更符合人类对新知识的学习.本书以教学场景续写,一章为半天知识点. 本书读者对象 阅读本书您需要具备html.css.js基础知识,所 ...
- 《HBase 不睡觉》第一章 - 初识 HBase
<HBase 不睡觉书>是一本让人看了不会睡着的HBase技术书籍,写的非常不错,为了加深记忆,决定把书中重要的部分整理成读书笔记,便于后期查阅,同时希望为初学 HBase 的同学带来一些 ...
- c生万物【第一章 初识c语言】
c生万物---第一章 初识c语言 前言 1.什么是C语言 2.第一个C语言程序 3.数据类型 4.变量.常量 4.1定义变量的方法 4.2变量的分类 4.3变量的使用 4.4 变量的作用域和生命周期 ...
- 第一章 初识NANO板卡
第一章 初识NANO板卡 一. 英伟达Jetson Nano 是什么 二. 为什么要用NVIDIA DIGITS 三. 我们可以在Jetson Nano上运行什么样的算法? 四.英伟达 NANO板卡配 ...
- Cocos2d-x 3.0 红孩儿私家必修 - 第一章 初识Cocos2d-x 3.0工程
Cocos2d-x 3.0 红孩儿私家必修 前言: 时光飞逝,每每看到博客上的回复和微博上的鼓励,总会觉得亏欠大家点什么.停下来太久,总是觉得不太对劲,哈哈,时习之吧,望以此勉励大家. 红孩儿C ...
- 第一章 初识Docker
第一章 初识Docker 1.1 什么是Docker Docker开源项目 Docker是基于Go语言实现的云开源项目,诞生于2013年初,最初发起者是dotCloud公司.Docker自开源后受到广 ...
最新文章
- 为什么不建议企业组织自行配置SD-WAN?—Vecloud微云
- Pandas: 如何将一列中的文本拆分为多行?
- hashtable与HashMap区别
- 数据可视化课程_在这个由10部分组成的免费数据可视化课程中学习D3
- java-pdf转word,java开发面试笔试题
- JFreeChart 简单使用
- 功能测试Ⅷ——业务流程测试
- 神舟K650c i7(W350STQ)上成功装好Mac OS X 10.9,兼谈如何安装WinXP、7、8.1、OSX、Ubuntu五系统(Chameleon、MBR)
- python 画出决策边界_决策边界用python实现
- 都来看电影!手机播FLV格式视频全攻略(转)
- 下载各种离线地图(包括高德英文版地图)
- 【干货】JavaScript 资源大全
- 时光金科php_发布中国首个社区敬老宣言,共敬美好岁月-金科全国首届重阳敬老节温暖落幕...
- 中文散步的时候,发现枫叶开始红了
- 如何使用Arcgis10.6在影像中画shp继而对影像做出裁剪
- nvidia显卡驱动卸载和卸载后的问题
- EMC 电路设计基础
- 51单片机之位操作指令SETB、CPL等
- 数学建模-马尔萨斯人口问题
- .NET开发中的几个JS奇技淫巧
热门文章
- loctionplace.reset_index(drop=True,inplace=True)
- 关于moment七七八八
- 史上最全python字符串操作指南 #华为云·寻找黑马程序员#
- 【思科源码实例】企业网络搭建项目,带文档和PKT源文件.局域网网络作业.
- 秒杀系统常用的削峰方法
- 【历史上的今天】3 月 6 日:Unix 版权争夺战;豆瓣网上线;谷歌推出了 Google Play
- Open Euler学习
- 阿里云RDSDRDS初探
- 渗透杂记2013-07-31
- 【阿里云ACE】北京新春活动