初识html
!DOCTYPE html>
<!-- //文档的类型为：html文本===让浏览器进行读写的 -->
<html lang="en">
<!-- 超文本标记语言 -->
<head>
<!-- 网页的头部 -->
<meta charset="UTF-8">
<!-- 定义字符编码格式 h5遵循的默认编码格式就是UFT-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 网页的标题 -->
</head>
<body>
<!-- 网页主题 -->
<!-- 1.注释：对代码进行解释说明的，不会在浏览器进行加载显示，只会对程序员起作用
2.快速创建网页的基础结构
-->
<!-- 3.代码的规律：有些代码是成对出现的
有些代码是单独出显得
标签的书写分类：
（1）.双标签
<标签的名字 属性="属性值" 属性="属性值" ></标签的名字>
(2)单标签
<标签的名字 属性="属性值" 属性="属性值">
特点：
1.所有的标签都需要使用<>
2.所有的属性和标签名字之前都需要带空格
3.属性和属性值之间使用符号链接
4.属性值都需要带引号
5.每一组属性和属性值都需要使用空格隔开
6.双标签必须带/不带、都行 -->
</body>
</html>加粗-倾斜-下划线知识点及例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>加粗倾斜下划线</title>
</head>
<body>
<!-- 加粗标签
作用：对文本进行加粗===使文本更加具有语义化
语法：<b>文本</b> <strong>wenben </strong> -->
我是一个粉刷匠，粉刷本领强
<b> 我是一个粉刷匠，粉刷本领强</b>
<strong>我是一个粉刷匠，粉刷本领强</strong>
<!-- 倾斜标签
作用：让文本倾斜显示
语法：<i>文本</文本> <em> 文本</em>-->
我是一个粉刷匠，粉刷本领强
<i> 我是一个粉刷匠，粉刷本领强</i>
<em>我是一个粉刷匠，粉刷本领强</em>
<!-- 下划线标签
作用：给文本添加下划线效果
语法：<u>文本</u> -->
我是一个粉刷匠，粉刷本领强
<u> 我是一个粉刷匠，粉刷本领强</u>
</body>
</html>字体标签
<title>字体标签</title>
</head>
<body>
<!-- 字体标签==字体修饰标签
font==双标签 -->
<!-- <font size="">文本 </font> size=字体大小
size取值1（最小） 7（最大）（3是默认的字体大小）
color===颜色文本
取值：red green blue
字体属性：face
目前来看：浏览器里面支持的字体 宋体 隶属 楷书 微软雅黑
浏览器默认字体： 宋体
-->
学习学习学习
<font size="7" color="red" face="宋体">学习学习学习</font>
</body>
</html>角标和删除线
<title>角标和删除线</title>
</head>
<body>
<!-- 角标标签
上下角标 h2o 2m
下角标标签；<sub>数值</sub>>
上角标标签；<sup>数值</sup>> -->
h<sub>2</sub>o
2<sup>m</sup>
<!-- 删除线
文本添加删除线修饰===类似于删除效果
双标签=====s/del
区别：del更加具有语义化 -->
<s>不要998</s>，<del>不要98</del>，只要9.8
段落和换行
<title>段落和换行</title>
</head>
<body>
<!-- 段落
标签：双标签--<p>文本</p>
注意事项：p里面只能嵌套对应的文本修饰标签：不能嵌套自己本身，===独立的段落修饰标签
-->
<p>1、Life is full of confusing and disordering Particular time,a particular location,</p>
<p>1、Life is full of confusing and disordering Particular time,a particular location,</p>
<!-- 换行标签：<br> -->
<p>1、Life is full of confusing and disordering Particular time,a particular location, <br>1、Life is full of confusing and disordering Particular time,a particular location,</p>
div和删除线
<title>div和span标签</title>
</head>
<body>
<!-- div标签
盒子元素，块级元素，容器
作用：用于区块的划分
默认div纵向显示
-->
<div>我是第一个div</div>
<div>我是第一个div</div>
<div>我是第一个div</div>
<div>我是第一个div</div>
<!-- 对独立文本的额修饰：
如果修饰一大段文本中的一块文本需要使用span单独扩起来然后进行独立起名字修饰如何显示 -->
<span>
我是第一个
我是第一个span
</span>
<span>
我是第一个
我是第一个span
</span><span>
我是第一个
我是第一个span
</span><span>
我是第一个
我是第一个span
</span>1
根据结构快速创建
<title>根据结构快速创建</title>
</head>
<body>
<!-- div+tab -->
<div></div>
<!-- div*数值+tab *2 -->
<div></div>
<div></div>
<!-- div{文本}+tab -->
<div>文本</div>
<!-- div{*数值=tab} *2 -->
<div>文本</div>
<div>文本</div>
<!-- div{文本$}*数值+tab *3-->
<div>文本1</div>
<div>文本2</div>
<div>文本3</div>
div>p <div><p></p></div>
<!-- div>p*2 -->
<div>
<p></p>
<p></p>
</div>
<!-- viv*5>div*2 -->
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>
<div>
<p></p>
<p></p>
</div>标签结构嵌套
<title>结构标签嵌套</title>
</head>
<body>
<!-- 标签结构嵌套
一层包裹一层 -->
<!-- 修饰成加粗或者倾斜 -->
<b><i>我是来自四川的人</i></b>
列表标签
<title>列表标签</title>
</head>
<body>
<!-- 列表标签
1.有序列表
ol>li
<ol></ol>
修改序列项显示类型
type="1/A/a/i/I"
-->
<ol type="I">
<li>第一部</li>
<li>第二部</li>
<li>第三部</li>
</ol>
<!-- 2.无序列表:ul>li
默认列表项为黑色的实心圆点
修改显示类型 type="disc/circle/square/none
none(取消列表项)使用频率最高-->
<!-- ul>li{li里面的内容}*3 -->
<ul>
<li>li里面的内容</li>
<li>li里面的内容</li>
<li>li里面的内容</li>
</ul>
<!-- 3.自定义列表 应用场景：问答列表；图文双排
语法结构：双标签
dl>dt
dd -->
<dl>
<dt>图片/问题</dt>
<dd>图片的解释说明/答案</dd>
</dl>
文本标题
<title>文本标题标签</title>
</head>
<body>
<!-- 经常使用在新闻稿件/文章标题论文二级目录、小说目录
标签结构：双标签 <h1></h6>
特点：6级标签；h1最大 h6最小 自带加粗 换行效果 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>根据今日所学所写作业1
作业2
<title>作业2</title>
</head>
<body>
<h1>有带颜色的诗</h1>
<!--h1 最大号字体标题 -->
<ol type="1">
<!-- 序列号为“1” -->
<li><font color="blue">绿</font>杨烟外晓寒轻，<font color="red">红</font>杏枝头春意闹————宋宋祁《玉楼春》</li>
<!-- <font>表示就是一段文本 -->
<li>一道残阳铺水中，半江瑟瑟半江<font color="red">红</font>————唐白居易《暮江吟》</li>
<li>黄梅时节家家雨.<font color="green">青草</font>池塘处处蛙————宋赵师秀《有约》</li>
<li>一水护田将<font color="green">绿</font>绕，两山排闼送<font color="green">青</font>来————宋王安石《书湖阴先生壁》</li>
<li>日出江花<font color="red">红</font>胜火，春来江水<font color="blue">绿</font>如<font color="green">蓝</font>————唐白居易《忆江南》</li>
<li>等闲识得东风面，万<font color="purple">紫</font>千<font color="red">红</font>总是春————宋朱熹《春日》</li>
</ol>
</body>
</html>
90
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
