Web前端 | HTML

注释

解释说明代码，隐藏代码

注释不能嵌套

语法实现：

常用标签：

1、<p>段落</p>

2、<a>链接</a>

①href：创建指向另一个文档的链接

<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

②name：创建文档内的书签

<a name="tips">基本的注意事项 - 有用的提示</a>

3、<image>图片</image>

<img src=file:///D:\Source\素材\1.jpg><br>

4、<em>斜体</em>

……

块级元素

1.总是从新的一行开始

2.高度、宽度都是可控的

3.宽度没有设置时，默认为100%

4.块级元素中可以包含块级元素和行内元素

<h1>一级标题</h1><p>段落</p>
<ul>无序列表</ul>

行内元素

也称为“内联函数”

1.和其他元素都在一行

2.高度、宽度以及内边距都是不可控的

3.宽高就是内容的高度，不可以改变

4.行内元素只能是行内元素，不能包含块级元素

<a>链接</a>
<br>  换行
<b>加粗</b>

实体

实体名称：“&”＋字母

实体编号：“&#”＋数字

<!--小于号“<”的实体名称是“&lt;”，实体编号是“<”-->
<p>&lt;</p>
<p><</p><!--版权“©”的实体名称是“&copy”，实体编号是“©”-->
<p>&copy;</p>
<p>©</p>

输出：

列表

1.无序列表：使用粗圆点，始于 <ul>…</ul>标签，每个列表项始于 <li>…</li>

<ul><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul>

输出：

咖啡
茶
牛奶

2.有序列表：使用数字，始于 <ol>…</ol>标签，每个列表项始于 <li>…</li> 标签
可以用“start”设置从列表数字哪里开始，例如：start="50"就表示列表从50开始

<ol><li>咖啡</li><li>牛奶</li><li>茶</li>
</ol>

输出：

咖啡
牛奶
茶

<ol start="50"><li>咖啡</li><li>牛奶</li><li>茶</li>
</ol>

输出：

50.咖啡

51.牛奶

52.茶

3.定义列表：以 <dl>…</dl>标签开始，自定义列表项以 <dt>…</dt>开始，自定义列表项的定义以 <dd>…</dd>开始

<dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

输出：

计算机

用来计算的仪器 ... ...

显示器

以视觉方式显示信息的装置 ... ...

绝对路径

完整的路径

网址也属于绝对路径

相对路径

指目标相对于当前文件的路径。

在同一个网站下，不同文件之间的位置，如果源文件和引用文件在同一个目录里，直接写引用文件名即可。

两个实战：

1、常见标签的使用

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>糖醋排骨</title>
</head>
<body><h1><b>《糖醋排骨》的制作方法</b></h1><b>菜品名称：</b><b>糖醋排骨</b><br><b>市场价格：</b>26<br><b>会员价格：</b><font color="red">24</font><br><b>使用配料：</b>排骨、糖、醋<br><b>菜品类型：</b>炒菜<br><br><b><em><u>做法：</u></em></b><br>1.猪小排洗净，晾干水分备用；<br>2.锅内倒少量油，燥热之后，爆香姜片；<br>3.放入排骨，一直煸炒到排骨变色后，表面金黄微焦；<br>4.此时就可以放入金黄比例中的调料了，顺序是：先放一汤勺料酒，接着两汤勺酱油，三汤勺米醋，最后四汤勺白糖，炒匀；<br>5.再倒入能没过排骨的开水，调中小火焖20分钟；<br>6.20分钟后调入盐，开大火收汁，收到汁浓色亮时，撇入芝麻点缀即可出锅（锅里剩下的姜片丢掉不用，最后大火收汁时注意多翻动锅内的排骨，避免烧焦哟！）。<br><hr/>&copy; 2015  阿婆私房菜
</body>
</html>

2、链接和图片的使用（省略文字部分）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>楚乔传</title>
</head>
<body><font size="5">楚乔传</font><br>中国大陆 67集(TV版)/58集(DVD版)<br>《楚乔传》是由慈文传媒、蜜淘影业、克顿传媒联合出品的女性励志传奇古装剧。由吴锦源执导，嘉纹、杨涛、陈岚编剧，赵丽颖、林更新、窦骁、李沁领衔主演，邓伦、金士杰特邀出演，王彦霖、牛骏峰、黄梦莹、田小洁、孙宁、金瀚、邢昭林、曹曦月、朱圣祎、阮圣文、李若嘉、苗苗等联合出演。<br><a href=#d1>第1集</a><a href=#d2>第2集</a><a href=#d3>第3集</a><a href=#d4>第4集</a><p id = d1><img src=file:///D:\Source\素材\1.jpg><br><font size="5">第1集</font><br>摇摇晃晃的囚车上，一名少女正在闭目沉睡。……有人将暖炉放在了她的手里，楚乔便醒了过来，原来是姐妹们在照顾她。<br></p><hr/><p id = d2><img src=file:///D:\Source\素材\2.jpg><br><font size="5">第2集</font><br>楚乔伤病还未痊愈，便被宋大娘遣来干活。……浓浓的难过夹杂着满满的无奈，倾袭着每一个荆家姐妹的心。<br></p><hr/><p id = d3><img src=file:///D:\Source\素材\3.jpg><br><font size="5">第3集</font><br>青山院灵堂肃穆，宇文玥一身孝衣，沉静的面色里透出几分隐隐的忧伤。……但楚乔冷漠的神色却让燕洵很不解，楚乔告诉燕洵，自己的哥哥姐姐新丧，自己也朝不保夕，自然高兴不起来。<br></p><hr/><p id = d4><img src=file:///D:\Source\素材\timg.gif><br><font size="5">第4集</font><br>宇文玥挑选侍寝婢女的消息很快传了开来，听着小七小八的议论声，楚乔心底里萌生出了求生的新芽。……宇文玥不信楚乔会忘记自己亲手杀了她哥哥的仇恨，而楚乔却表示自己已经答应过姐姐，要好好照顾两个妹妹。</p></body>
</html>

Web前端 | HTML | 基础相关推荐

Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
Web前端开发基础三剑客学习知识分享
Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML.CSS.JavaScript.除此之外还要学习数据可视化.Vue.React.Angular相关框架,熟练运用框架提升开发效率, ...
Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
html怎么在线安装,web前端零基础学习教程，如何安装HTML编辑器！
原标题:web前端零基础学习教程,如何安装HTML编辑器! HTML 编辑器推荐: 可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器: Notepad++:http ...
Web前端零基础入门——HTML5
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通 html入门 index1 > <html><head><title>我是谁? ...
Web前端技术基础实验报告三之超链接与多媒体文件应用
目录 Web前端技术基础实验报告实验题目:超链接与多媒体文件应用实验目的:熟悉超链接与多媒体文件的插入的相关标签实验内容 : 实验过程及结果 Web前端技术基础实验报告实验题目:超链接与多媒体 ...
现代前端技术解析：Web前端技术基础
最近几年,越来越多的人投入到前端大军中:时至至今,前端工程师的数量仍然不能满足企业的发展需求:与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作 ...
web前端开发基础——在网页中使用表格
web前端开发基础--在网页中使用表格文章目录 web前端开发基础--在网页中使用表格前言一.表格 1.表格及其基本使用 2.引用css 二.单元格的合并 1.样例 2.样例代码前言本篇主要 ...
好程序员web前端教程分享web前端入门基础知识
好程序员web前端教程分享web前端入门基础知识,作为合格的Web前端工程师必须得掌握HTML.CSS和JavaScript.只懂其中一两个还不行,必须对这三门语言都要熟悉.下面我们一起来看一看吧! ...
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...

Web前端 | HTML | 基础

Web前端 | HTML | 基础相关推荐

最新文章

热门文章