html语言标记基础
常用的几种标记
结构组成
- 头部+主体+脚注
<div>的作用——区分具体的内容，特别要注意<div>和</div>的应用，在套用样式表的时候，因为在
<div class="header">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Site</a></li>
<li><a href="#">Other</a></li>
</ul>
</div>
- 缺失了/div或/ul；
- /div或/ul的斜线为英文输入，/／前一个是英文输入，后一个是中文输入，中文输入的斜线不能被识别；
缺失这些部分，电脑找不到结束的标志，最后原本显示为整齐排版的文稿变得七零八乱。
网页的html举例
<head>标题内容</head>
<div>
<body>
<div>
<p>纯文字</p>
</div>
<div>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</div>
<div>
<p>©；foot内容</p>
</div>
</body>
纯文字：
<p>纯文字</p>
文字类型的列表
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
图片类型的列表
<ul>
<li><img src=images/照片名称001.jpg></li>
<li><img src=images/照片名称002.jpg></li>
<li><img src=images/照片名称003.jpg></li>
</ul>
角标
<p>©；输入你的角标内容</p>
分割线
<hr>
这里需要注意的是：
- img src=images/照片名称001.jpg中是images，而不是image
- ©；后为“；”不是“：”
- 文字和图片都是本地素材
- 网页是本地的静态网页，或者说，更像是本地的以html格式保存的文档
关于css样式表
样式表的类型
样式表描述的是字体字号以及图片和素材的位置与距离，以下是一段样式表：
.nav { <!--样式名称叫nav-->
padding-left: 0; <!--左侧的间距 -->
margin: 5px 0 20px 0; <!--字体大小 -->
text-align: center; <!--文字居中对齐 -->
}
- head内的样式表会对全文（即body部分生效），为全局效应的样式表。
<head>
<meta charset="UTF-8">
<title>the blash</title>
<link rel="stylesheet" type="text/css" href="homework.css">
</head>
这个样式表说明，文本格式的格式，以及选取的样式表来自：homework.css
- body内的样式表基本用的是class来定义
<div class="header">
<ul class="nav">
<ul class="photos">
其中，header、nav、photos的对齐方式在css中已经写的很清楚，在每一个大板块的div里，子素材的位置已经确定。
css并不是万能的
有时候，对个别图片的大小调整，或者添加背景图，在html中实现比css中更加方便，所以，个别样式的调整也会通过html来输出，譬如：
 <!--背景图的调整-->
<li><a href="#">Site</a></li>
<p>若换成链接，如：将“#”替换成“www.bing.com”，点击Site会打开必应搜索</p>
<li></li>
<!--图片的长宽-->
多学一点：alt="Pic1"是什么意思？
答：如果0001.jpg图片加载过慢，会在图片的位置上出现一个Pic1的文字，同时占位。
示例图片.png
本文的所有代码及下载链接<a href="https://github.com/mugglecoding/Plan-for-combating/tree/master/week1/1_1">点击这里</a>
本文的代码来自网易云课堂的《0基础Python实战》，@麻瓜教程。
网友评论