前端学习笔记之HTML5基础语法与标签（⼀）
前端学习笔记之HTML5基础语法与标签
Section1
IDE
VS Code
配置中⽂界⾯需要安装插件，在插件中⼼搜索Chinese，安
装插件即可。
使⽤Ctrl + ⿏标滚轮缩放字体，即打开设置搜索 Editor: Mouse Wheel Zoom
安装Live Server插件可以让 “实时热更新” ⽹页，⾃动刷新⽹页。安装后按ctrl+shift+p键，选择 “Open With Live Server”
即可。但这种⽅法必须存放在⽂件夹中，且VSCode已经打开这个⽂件夹。
在插件中⼼搜索Sublime，安装插件即可使⽤Sublime的快捷键
快捷键功能
ctrl + shift + d复制当前⾏
ctrl + shift + ↑上移当前⾏
ctrl + shift + ↓下移当前⾏
按住⿏标滚轮下拉多⾏编辑Sublime Text3
Atom
WebStorm
HBuilder
Section2
HTML⾻架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="……">
<title>Document</title>
</head>
<body>
...
</body>
</html>
HTML标签
双标签
title 标签 设置⽹页标题 有利于SEO (Search Engine Optimization，即搜索引擎优化 )
p 标签
h 标签
div 标签
单标签
br、hr
input
meta 标签
使⽤meta标签设置⽹页关键词和描述，name属性⾮常关键，
⽤来设置meta的具体功能
<meta name="Keywords"content="慕课⽹，imooc，JAVA，前端，
Python，⼤数据">
<meta name="Description"content="慕课⽹（IMOOC）是IT技能学习平台。慕课⽹(IMOOC)课程涉及JAVA、前端、Python、⼤数据等60类主流技术
语⾔，覆盖了⾯试就业、职业成长、⾃我提升等需求场景，帮助⽤户实现从
技能提升到岗位提升的能⼒闭环。">
<!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>
<meta name="Keywords"content="美容，减脂，关爱">
<meta name="Description"content="⼩慕医⽣是专业的医院，理念就是关爱，责任和品质"> </head>
<body>
<!-- 页⾯头部 -->
<div class="header">
<!-- ⽹页logo -->
<div class="logo">
<h1>⼩慕医⽣</h1>
</div>
<!-- 功能区 -->
<div class="tool"></div>
<!-- 导航条 -->
<div class="nav"></div>
</div>
<!-- ⽹页的Banner -->
<div class="banner"></div>
<!-- ⽹页的主要内容 -->
<div class="content">
<!-- 常⽤链接 -->
<div class="useful-links"></div>
<!-- 医院动态和医院公告区域 -->
<div class="news-and-notice">
<!-- 医院动态 -->
<div class="news">
<h2>医院动态</h2>
</div>
<!-- 医院公告 -->
<div class="notice">
<h2>医院公告</h2>
</div>
</div>
<!-- ⼴告图⽚ -->
<div class="ad-images"></div>
<!-- 科室介绍 -->
<div class="dep-info">
<h2>科室介绍</h2>
</div>
<!-- 专家介绍 -->
<div class="exp-info">
<h2>专家介绍</h2>
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<!-- 友情链接 -->
<div class="friend-links"></div>
<!-- ⼩慕医⽣联系⽅式 -->
<div class="address"></div>
</div>
</body>
</html>
HTML5特性
空⽩折叠现象
⽂字和⽂字之间的多个空格、换⾏会被折叠成⼀个空格。
标签“内壁”和⽂字之间的空格会被忽略。
转义字符
转义字符意义
<⼩于号
>⼤于号
 ；空格
©；版权符号 HTML注释
Section3
⽆序列表
⽆序列表使⽤<ul></ul>标签 (ul的⼦标签只能是li)，每个列表项都是<li></li> (注意这个必须放在ul或ol标签内不可单独使⽤，这个标签内部可放置其他标签)
列表的嵌套
<ul>
<li>
<h3>江苏省</h3>
<ul>
<li>南京</li>
<li>苏州</li>
<li>⽆锡</li>
</ul>
</li>
<li>
<h3>湖北省</h3>
<ul>
<li>武汉</li>
<li>黄⽯</li>
</ul>
</li>
</ul>
ul标签有type属性 : HTML5中已经被废弃，建议使⽤CSS代替
<ul type="cicle"></ul>
<ul type="disc"></ul>
<ul type="square"></ul>
有序列表
有序列表使⽤<ol></ol>标签 (ol标签的⼦标签只能是li)，每个列表项都是<li></li>标签
ol标签有type属性，⽤来设置编号类型
a 表⽰⼩写英⽂字母编号
A 表⽰⼤写英⽂字母编号
i 表⽰⼩写罗马数字编号
I 表⽰⼤写罗马数字编号
1 表⽰数字编号（默认）
ol标签有start属性必须是阿拉伯数字表⽰起始位置 <ol start="3">
ol标签有reversed属性表⽰列表中的条⽬是否倒序排放 <ol reversed>，这是HMLT5全新特性定义列表
需要逐条给出定义描述的列表，就是定义列表
<dl>是定义列表标签，内容交替出现<dt>, <dd>标签
dl : definition list，dt data term，dd data definition.
<dl>
<dt>北京</dt>
<dd>我国⾸都、政治中⼼、⽂化中⼼</dd>
html单行文本框代码怎么写<dt>上海</dt>
<dd>国际经济、⾦融、科技创新中⼼</dd>
<dt>深圳</dt>
<dd>经济特区，国际化都市</dd>
</dl>
dl也可以dt和dd不交替出现，⽽是分别处于不同的定义列表中
<dl>
<dt>北京</dt>
<dd>我国政治中⼼、⽂化中⼼、国际交往中⼼、科技创新中⼼</dd>
</dl>
<dl>
<dt>上海</dt>
<dd>我国国际经济、⾦融、贸易、航运、科技创新中⼼</dd>
</dl>
<dl>
<dt>深圳</dt>
<dd>中国经济特区、全国性经济中⼼城市和国际化城市</dd>
</dl>
本节代码见
Section4
图⽚标签
<!-- 如何省略⾼度的话就会按⽐例等⽐例缩放，当然也可以加上⾼度 -->
<img src="img/gugong.jpg"alt=""width="300">
超级链接

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。