2.1 文字与段落排版
2.1.1 段落标签
<p>.....<p>可以成一行
align可以设置对齐方式的 center left right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p align="center">第一段</p >
<p align="left">第二段</p >
<p align="right">第三段</p >
<p>第四段</p >
</body>
</html>
2.1.2 标题标签
标题的作用变大和加粗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
</body>
</html>
2.1.3 换行标签
<br/> 可以换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>爱国民主<br/>
江西
</p>
</body>
</html>
2.1.4 水平线标签
<hr/>里可以设置宽度（size)和颜色(color)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<hr color="#ffc0cd" size="10px"/>
</body>
</html>
2.1.5 预格式化标签
<pre></pre>可以让换行和空格有效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<pre>
爱 国 人
今天状态： 开心
</pre>
</body>
</html>
2.1.6 缩排标签
<blockquote><blockqoute/>通常会左右缩进有时使用斜体，一般用来引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<P>记叙文一般可分为记人、叙事、写景、咏物等几种。记人，要表现人物的思想感情和性格;叙事，要写出事件所蕴涵的意义，这些意义可以是政治思想方面的，也可以表达某种哲理，或某种情趣;写景，要通过景物描写表现出个人某种感情或深刻的感悟;咏物，或透露出世间人生的某种乐趣，或托物言志，表现对社会上某种人某种现象的情感。因此，我们写记叙文总会有一定的目的，总要表达一定的思想和感情，实际上就是我们平常所讲的“文章的主题”，主题是文章的灵魂，它像一根红线贯串于文章的始终。没有明确主题的记叙文，只能是一篇流水帐，所以要写好记叙文，就必须要明确“为何叙”，即主题要明确。要主题明确可注意三点:第一，要有积极意义，即确定的主题思想感情必须是健康的，有意义的。</P>
<blockquote>记叙文一般可分为记人、叙事、写景、咏物等几种。记人，要表现人物的思想感情和性格;叙事，要写出事件所蕴涵的意义，这些意义可以是政治思想方面的，也可以表达某种哲理，或某种情趣;写景，要通过景物描写表现出个人某种感情或深刻的感悟;咏物，或透露出世间人生的某种乐趣，或托物言志，表现对社会上某种人某种现象的情感。因此，我们写记叙文总会有一定的目的，总要表达一定的思想和感情，实际上就是我们平常所讲的“文章的主题”，主题是文章的灵魂，它像一根红线贯串于文章的始终。没有明确主题的记叙文，只能是一篇流水帐，所以要写好记叙文，就必须要明确“为何叙”，即主题要明确。要主题明确可注意三点:第一，要有积极意义，即确定的主题思想感情必须是健康的，有意义的。</blockquote>
</body>
</html>
2.1.7 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全球汇商城简介</title>
</head>
<body>
<h1 align="center">100%正品 十重保障</h1>
<hr color="deeppink"/>
<p> 全球汇成立于2008 年,10 年来,凭借独创的特卖模式,精选全球正品好货,深度折扣,在电子商务研究中心 2018 年6 月发布的"2017 年度中国网络零售市场数据监测报告"中,全球汇在 B2C 市场交易份额方面发展势头良好,继续保持第三位。<b/>
唯品会是全球最大的特卖电商，以及中国第三大电商。<br />
<p><br/>
全球汇承诺:
<blockquote>
全球直采:货源保障，全球布局直采全世界好货。<br/>
入仓全检:质检保障，独立自理仓库坚持入仓全检验。<br/>
自营物流:物流保障，自营物流封闭操作全程可溯。<br/>
假货必赔:第三方保障，中国人保正品保险，假货必赔。<br/>
</blockquote>
</body>
</html>
2.2 超链接
2.1.1 超链接简介
1 超链接的定义
是一个网页指向另一个目标的连接关系
2 超链接的分类
根据链接目标文件不同可分：页面超链接、锚点超链接、电子邮件超链接
根据超链接单击对象的不同可分：文字超链接、图片超链接、图像映射等
3 路径
URL（统一资源定位器）：指的是每个网站都有独立的位置
2.2.2 超链接的应用
2.2.2.1 锚点标签<a>···</a >
<a href="url" title="指向链接显示的文字"target="窗口名称”>文本文字</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<a href ="http://www.baidu.com" >百度一下</a>
</body>
</html> 
2.2.2.2 指向其他页面的超链接
<a href="目标文件名.hyml"”>热点文本</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<a href="register.html">注册</a>
<a href="login.html">登录</a>
</body>
</html>
2.2.2.3 指向书签的超链接
当文章长的时候就可以点标签就到要去的地方。先要用<a>标签对网页元素做记号，语法为<a name="记号名">目标文本附近的内容</a>,再设置一个指向页面书签内的标签，语法为<a href="记号名”>热点文本</a>。
<!DOCTYPE html>
<html>
<body>
<a name="section1">章节 1 的开头</a>
<p>叙什么，就是写什么内容，在写记叙文时就要考虑选择哪些材料。选材时，要坚持三个标准，一是典型性，即选择出能充分表现中心的材料;二是真实性，即选出真人真事真景，包括来自现实生活的艺术真实;三是现实性，即选出有现实积极意义的材料。在选材具体操作时，最行之有效的选材方法是展开联想，联糸生活，即选材时可通过联想，从家庭生活、学校生活、社会生活等任意一个方面选出自己熟悉、感动的人和事。如在写《谢谢您给我的爱》(南京市95年中考作文题)时，我们不妨展开联想，从家庭生活方面选出祖辈、父辈给"我"爱的材料，从学校生活方面选出老师、同学给"我"爱的材料，从社会生活方面选出邻居、路人、警察等热心人给"我"爱的材料。材料选好，还需认真剪裁，做到详略得当，所所以还要注意两点:第一，要剪去雷同的材料。有些记叙文表现中心时不止用一个材料，那么这些材料应从不同侧面表现中心，如果从同一方面表现中心，那么其中的有些材料则属于“雷同”"的材料，应该删掉。第二，要注意详略得当。与中心关糸不大的材料要略写、与中心关糸极为密切的材料要详写。</p>
<a name="section2">章节 2 的开头</a>
<p>先说文章的结构，即所要写的这篇记叙文用什么结构来表现出来。它包括这篇文章分几层写，哪些材料先写，哪些后写，哪些详写，哪些略写，如何安排过渡，于何处伏笔，在哪里呼应，如何开头，怎样结尾，等等。从整篇记叙文来看、常见的结构有顺序、倒叙、插叙。顺叙，就是按照事情发生、发展的，过程进行叙述。包括以下几种情况:其一，按时间的推移来叙述;其二，按事情的发展来叙述;其三，按认识发展的过程来叙述;其四，按作者的行踪来叙述。倒叙，就是把事情的结局，或某个突出的精彩片断提到前边写，然后再按事件发生、发展的顺序叙述。倒叙的运用有四种类型:一种是把事件的结局提前，造成悬念，然后再按时间顺序叙述事情的发生与发展;一种是把事件中最精彩的或最紧张的片断截取下来，写在前面，震动和吸引读者，然后按时间的顺序叙述事件的起因、发展与结局;一种是先写眼前的事物，由此及彼，引起回忆，再追叙往事，形成倒叙，一种是先写当前情况，再回忆过去的情况，以形成鲜明的对比，给读者留下深刻印象。插叙，是在文章的叙述中，暂时中断叙述的线索，插入一些与中心事件有关的内容，然后再继续进行原来的叙述。插叙的具体内容和形式有种种不同:有的是追叙，对过去事件片断进行回忆，有的是补叙，对有关人和事作必要的补充、解释;有的是逆叙，对有关内容由近及远、由今及古地回溯，灵活多样的插叙，可以使主题开掘得更深刻，情节展开得更充分，内容表现得更充实，人物形象刻画得更丰满，避免了平辅直叙。。</p>
<a name="section3">章节 3 的开头</a>
<p>再说表达的方式。记叙文一般以记叙这种表达方式为主，但记叙文写人记事，写景状物，往往需要描写。对人物和环境作适当的描写，可以把人物、事件或景物写得有血有肉，有声有色，叫人看了如见其人，如临其境。描写的类型很多，从描写的对象划分，有人物描写和景物描写，人物描写中包括肖像、语言、行动、心理等描写方式。从描写的角度划分，有正面描写与侧面描写。这要在具体的写作中灵活运用。另外，在记人叙事的记叙文中，为了突出人物的高贵品质或突出事件的意义，有时要进行抒情和议论。再则，有时作者为抒发自己的感情，在记叙的基础上直接抒情，直接表露感情，或寓情于记叙之中，在记叙的过程中处处渗透着情感。这样综合运用好表达方式，写出来的文章就会摇曳多姿，绚烂多彩。。</p>
<p><a href="#section1">跳转到章节 1</a></p>
<p><a href="#section2">跳转到章节 2</a></p>
<p><a href="#section3">跳转到章节 3</a></p>
</body>
</html>
2.2.24指向下载文件的超链接
<a href="下载文件名">热点文本<a/>
2.2.2.5 指向电子邮件的超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<a href="mailto:gdnanfang@163.com">和我联系</a>
</html>
2.3 图像
2.3.1 网页图像的格式及使用要点
2.3.1.1 常见的网页图像格式
网页图像的格式：GIF、JPEG、PNG
2.3.1.2 使用网页图像的要点
使用网页图像的使用要点：（1）、图片体积过大就不适合网络传输 (2)、页面不要太潮的动画 （3）、在同一文件多次使用的图像时，使用相对路径查找该图像。
2.3.2 图像标签
2.3.2.1 图像的替换文本说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
</html>
<img src="img/jl.jpg"/>
</body>
</html>
2.3.2.2 设置图像大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
</html>
<img src="img/jl.jpg"/ width="100" height="100"/>
</body>
</html>
2.3.2.3 图像的边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
</html>
<img src="img/jl.jpg" border="100px" />
</body>
</html>
2.3.3 图像超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
</html>
<img src="img/jl.jpg" border="100px" />
<a href="http://www.baidu.com"><img src="img/baid.jpg"/></a>
</body>
</html>
2.3.4 设置网页背景图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
</html>
<body background="img/微信图片_20240913200903.png"></body>
</body>
</html>
2.3.5 图文混排
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图文混排</title>
</head>
<body>
<h1 align="center">江西</h1>
<hr color="#ff0000" size="10px"/>
<img src="img/微信图片_20240913200903.png" align="right" />
<p>随便涂鸦：面对整张的白纸，整版的白屏，无从开始，肯定恐怖。<br />
你会想：我还是看看邮件或是小憩一会了吧！记住，千万别这样。<br />
马上开始写，你写什么没有关系，只要你开始写了，什么都好办了。
</p>
</body>
</html>
2.4 列表
2.4.1 无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
2.4.1.1 在<ul>后指定符号的样式
<ul type="disc">
<ul type="circle">
<ul type="square">
<ul img src="graph, gif">
就近原则，自己没有问爸爸要
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul type="square">
<li>1</li>
<li type="circle">2</li>
<li>3</li>
</ul>
</body>
</html>
2.4.1.2 在<li>后指定符号的样式
2.4.2 有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ol>
<li>1</li>
<li >2</li>
<li>3</li>
</ol>
</body>
</html>
2.4.3 定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<dl>
<dt>1：</dt>
<dl>哈哈哈</dl>
<dt>2：</dt>
<dl>啦啦啦</dl>
</dl>
</body>
</html>
2.4.4 嵌套列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ol>
<li>0</li>
<dl>
<dt>i：</dt>
<dl>哈哈哈</dl>
<dt>y：</dt>
<dl>啦啦啦</dl>
</dl>
<li>7</li>
<ol type="A">
<li>c</li>
<li>5</li>
</ol>
</ol>
</body>
</html>
2.5 综合案例——无线吸尘器说明书
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无线吸尘器说明书</title>
</head>
<body>
<h1>Dyson V8 absolute 无线吸尘器</h1>
<hr color="deeppink" />
<ul style="font-size:25px">
<li type="square" style="color: deeppink">商品参数</li>
<p style=“font-size：25px">吸尘器类别：手持式吸尘器<br/>功率：500 W<br/>
储尘类型：旋风尘盒/尘桶<br/>吸尘类型：干/湿吸均可<br/>适用面积：91m²-150m²<br />产品特色：除螨，HEPA滤网<br/>
线长：充电式（无线)<br />吸嘴类型：圆毛刷<br/>
适用环境：厨房，地板，地毯，床铺，汽车，沙发，瓷砖，酒店<br/>售后服务：海外进口商品不支持
国内联保，无法享受与产地同等售后服务<br/>
品牌名称：Dyson<br />商品名称：我家那闺女Dyson V8 absolute 无线吸尘器<br/>
产地：马来西亚<br />商品编号：V8absoluteUS<br/></p >
<li type="square" style="color:deeppink">商品展示</li></ul>
<img src="img/1.jpg" title="无线手持吸尘器"align="middle"/>
<h2>产品信息</h2>
<p style="font-size:25px;">品牌：Dyson 戴森<br />品名:无线手持吸尘器美版<br />
型号：V8 Absolute<br />
吸力：高达115空气瓦特<br/>
使用时间：普通模式约40分钟、MAX模式约7分钟<br/>（电动驱动吸头在非MAX模式下运行约25分钟)<br/>充电时间：约5小时<br/>
产品尺寸：长124.4厘米，宽18厘米，高22.4厘米<br/>
重量：2.61公斤<br/>
容量：0.54升<br/>
吸头配件：软绒滚筒吸头、升级版直驱吸头、缝隙吸头、<br/>
电动床褥吸头、二合一吸头、软除尘毛吊<br/>
产品特点：电力升级、新形式集尘桶、双层放射式气旋、HEPA<br />
过滤系统、噪声分贝更小<br/>
</p >
<h2>产品特点</h2>
<img src="img/tedian.JPG" width="750" height="450"/>
<h2>戴森科技,英国品质</h2>
<p style="font—size：25px">戴森 V8 美版无绳吸尘器高配版，新的动力设计。<br/>
有助吸除家中四处的过敏原，吸附99.97%小至0.3微米的微尘，<br/>
运行时间高达40分钟，2款地板吸头及4款配件吸头，清洁空间高达291平米。</p >
<img src="img/left.JPG" align="left" width="350" height="290" /><br/><br/><h1>
HEPA过滤系统<br/>
吸附微尘99.97%小至0.3微米<br/>米的微尘，减少过敏原回流空至<br/>气中。<br/></h1>
<br />
<br />
<img src="img/canbin.jpg">
<blockquote style ="font-size：25px">官网地址：<a href="https://shop.dyson.cn/ ">
https://shop.dyson.cn/</a ></blockquote>
</h1></body></html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
