一、文件结构
1. 声明网站版本类型
<!DOCTYPE html>
2.<head>头部(不显示在网站中)
<html>
<head>
文件的字符编码、关键字和程序脚本及网站名称
<head>
</html>
3. <body>网站主体
<html>
<head>
文件的字符编码、关键字和程序脚本及网站名称
<head>
<body>
图片、文字等
</body>
</html>
4. 输入!+Tab键,即可得到整体结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">个人中心</a></li>
</ul>
<h1>你好</h1>
<p><strong>我的名字是</strong></p>
<p><em> Nobody </em></p>
<p><a href="#">了解更多</a></p>
</body>
</html>
其中,lang代表网站主要使用的语言,可替换成:
zh-Hant :中文(繁體)
zh-Hans:中文(簡體)
zh-CN:中國大陸
zh-HK:香港
zh-MO: 澳門
ctrl+s保存文件后,打开文件就能刷新了
二、主要标签类型
区块元素(一行空间)和行内元素(有多少内容就占多少空间)
1. 标题设置
<h1>这是大标题<h1>
<h2>二级标题<h2>
以此类推
2. 正文(独立段落,独立区块)
<p>这是正文<p>
3. 粗体和斜体
<p><strong>这是粗体</strong><p>
<p><em>这是斜体</em><p>
4. a标签(建立网络的连接,把这个文字变成可点击跳转的形式)
<p><a href="#">了解更多</a></p>
href后可以接文件里的地址,也可以接网址
5. 清单
5.1 有序清单
<ol>
<li>第一</li>
<li>第二</li>
<ol>
5.2 无序清单
<ul>
<li>第一</li>
</ul>
6. blackquote标签引用
<blackquote cite = "引用的网址">引用的正文</blackquote>
这里的cite属性不是必须的
7. 换行(br)
在要换行的句子开头前加一个<br>,注意,这里不需要闭合起来。
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML 代码中的所有连续的空行(换行)也被显示为一个空格
8. 导入图片(也是区块元素)
<img src = "images/img1.png", alt="这是一张图片">
这里的src后面接图片所在的网址或图片的文件路径,
alt后面接描述这张图片的文字(必须),注意!!
这段文字不会在正常显示图片时出现,而会在图片无法正常显示时显示
9. 用水平线隔开(hr)
<hr>
三、html语义标签
语义标签是为了让搜索引擎更好地理解网站的内容,增进网站的曝光率。
添加了这些标签并不会让页面看起来发生改变,如果想可视化变化,需要在css文件中更改这些标签的background color。
<header> 包含了网站的logo和页首等相关的资讯
<nav>放置网站的导览列或主选单
<main>防止网站的主要内容
<footer>页尾:用来标注网站的版权声明等
这四个标签都是放置在<body></body>里的
还有<section>标签,用于当main部分内容比较多,需要分类时
四、表单和按钮设计
语法:
<section class="news letter">
<p>歡迎訂閱烘培工坊電子報,可不定期收到限定優惠喔 !</p>
<form>(表单)
<input type="email" placeholder="請輸入您的 Email" required>
<button type="submit">送出</button>
</form>
</section>
type = "email"表示输入的类型为邮箱
placeholder="请输入你的Email",表示在文本框中的文字为“请输入你的Email“
required表示必填
<button>表示按钮
type = "submit"表示提交
<送出>为按钮的文字