第一章 初识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相关推荐

  1. 第一章 初识Mathematica

    第一章  初识Mathematica   1.Mathematica是什么 Matematica是由美国Wolfram公司研究开发的一个著名的数学软件,它提供了非常强大的功能,能够完成符号运算.数学图 ...

  2. 《起跑吧,Opa》 -- 中译本 第一章 初识Opa

    第一章 初识opa 本章,你将初识opa.你将学习如何安装Opa,编写opa程序以及熟悉Opa开发周期中的各个步骤. 安装opa 需要你预先从opa网站(http://opalang.org/)下载适 ...

  3. 第一章 初识EmguCV

    第一章 初识EmguCV 1.1 EmguCV的基本介绍 1.1.1 计算机视觉.OpenCV和EmguCV 计算机视觉是一门研究如何使机器"看"的科学,更进一步的说,就是是指用摄 ...

  4. 第一章 初识OpenHarmony

    序言 本书以3W1H教学法对每个知识点进行多维度介绍,笔者认为这样写更符合人类对新知识的学习.本书以教学场景续写,一章为半天知识点. 本书读者对象 阅读本书您需要具备html.css.js基础知识,所 ...

  5. 《HBase 不睡觉》第一章 - 初识 HBase

    <HBase 不睡觉书>是一本让人看了不会睡着的HBase技术书籍,写的非常不错,为了加深记忆,决定把书中重要的部分整理成读书笔记,便于后期查阅,同时希望为初学 HBase 的同学带来一些 ...

  6. c生万物【第一章 初识c语言】

    c生万物---第一章 初识c语言 前言 1.什么是C语言 2.第一个C语言程序 3.数据类型 4.变量.常量 4.1定义变量的方法 4.2变量的分类 4.3变量的使用 4.4 变量的作用域和生命周期 ...

  7. 第一章 初识NANO板卡

    第一章 初识NANO板卡 一. 英伟达Jetson Nano 是什么 二. 为什么要用NVIDIA DIGITS 三. 我们可以在Jetson Nano上运行什么样的算法? 四.英伟达 NANO板卡配 ...

  8. Cocos2d-x 3.0 红孩儿私家必修 - 第一章 初识Cocos2d-x 3.0工程

     Cocos2d-x 3.0 红孩儿私家必修 前言: 时光飞逝,每每看到博客上的回复和微博上的鼓励,总会觉得亏欠大家点什么.停下来太久,总是觉得不太对劲,哈哈,时习之吧,望以此勉励大家. 红孩儿C ...

  9. 第一章 初识Docker

    第一章 初识Docker 1.1 什么是Docker Docker开源项目 Docker是基于Go语言实现的云开源项目,诞生于2013年初,最初发起者是dotCloud公司.Docker自开源后受到广 ...

最新文章

  1. 为什么不建议企业组织自行配置SD-WAN?—Vecloud微云
  2. Pandas: 如何将一列中的文本拆分为多行?
  3. hashtable与HashMap区别
  4. 数据可视化课程_在这个由10部分组成的免费数据可视化课程中学习D3
  5. java-pdf转word,java开发面试笔试题
  6. JFreeChart 简单使用
  7. 功能测试Ⅷ——业务流程测试
  8. 神舟K650c i7(W350STQ)上成功装好Mac OS X 10.9,兼谈如何安装WinXP、7、8.1、OSX、Ubuntu五系统(Chameleon、MBR)
  9. python 画出决策边界_决策边界用python实现
  10. 都来看电影!手机播FLV格式视频全攻略(转)
  11. 下载各种离线地图(包括高德英文版地图)
  12. 【干货】JavaScript 资源大全
  13. 时光金科php_发布中国首个社区敬老宣言,共敬美好岁月-金科全国首届重阳敬老节温暖落幕...
  14. 中文散步的时候,发现枫叶开始红了
  15. 如何使用Arcgis10.6在影像中画shp继而对影像做出裁剪
  16. nvidia显卡驱动卸载和卸载后的问题
  17. EMC 电路设计基础
  18. 51单片机之位操作指令SETB、CPL等
  19. 数学建模-马尔萨斯人口问题
  20. .NET开发中的几个JS奇技淫巧

热门文章

  1. loctionplace.reset_index(drop=True,inplace=True)
  2. 关于moment七七八八
  3. 史上最全python字符串操作指南 #华为云·寻找黑马程序员#
  4. 【思科源码实例】企业网络搭建项目,带文档和PKT源文件.局域网网络作业.
  5. 秒杀系统常用的削峰方法
  6. 【历史上的今天】3 月 6 日:Unix 版权争夺战;豆瓣网上线;谷歌推出了 Google Play
  7. Open Euler学习
  8. 阿里云RDSDRDS初探
  9. 渗透杂记2013-07-31
  10. 【阿里云ACE】北京新春活动