1. HTML - Hyper Text Markup Language
- HTML code is written in the tag, the browser is the execution environment of this language
- It executes the code written in html and renders the result to the browser window
- All the code is written under the html tag, which is the top-level tag
- Tags basically have start tags and end tags, tags can also have attributes
# 使用快捷键 --- ！+ tab-可以快速生成html的格式文档，就如下面的格式所示
<!DOCTYPE html> # 文档类型声明，说明页面使用的是HTML5的规范
<html> #
<head> # 头文件 head标签中的内容不会显示在浏览器的主窗口中
# 这里主要包含了网页的元数据信息
<meta charset="UTF-8"> # 元文件
<title>墨墨的神秘小窝</title> # 这里的title标签代表网页的标题
<style type="text/css"> # 负责渲染
height: 1px;
color: red);
font: arial;
</style>
</head>
<body> # 正文文件 body标签中的内容就是要显示在浏览器窗口中的信息
<h1>你好，美女</h1> # 一级标题标签，一共用7级标题
<hr /> # 定义水平线
<button></button>
<script type="text/javascript"> # 跟js交互，一般放在body的最后
function foo(){
window.alert('hello, blonde girl')
}
</script>
</body>
</html>
Second, the three parts of the front end
- 1. Tags (tag/element) - carrying content
- 2. Cascading Style Sheets (CSS) - Display/render the page
- 3. JavaScript - interactive behavior, nothing to do with Java
Third, the label details
<p> --- 定义段落
<a> --- 定义超文本链接
<br> --- 定义换行
<em> --- 定义强调文本
<strong> --- 定义强调文本
<sub> --- 定义下标文本
<sup> --- 定义上标文本
<del> --- 定义被删除文本
<ins> --- 定义被插入文本
<q> --- 定义短的引用
<img> --- 定义图像
# 定义无序列表
<ur>
<li>刘明湘</li> # 定义列表的项目
<li>蔡佩轩</li>
<li>曾敏杰</li>
</ur>
# 定义有序列表
<ol>
<li>刘明湘</li> # 定义列表的项目
<li>蔡佩轩</li>
<li>曾敏杰</li>
</ol>
# 定义列表详情
dl>
<dt>刘明湘</dt> # 定义列表中的项目
<dd>刘明湘是我最喜欢的歌手之一</dd> # 定义定义列表中项目的描述
<dt>蔡佩轩</dt>
<dd>蔡佩轩是我最喜欢的歌手之一</dd>
<dt>曾敏杰</dt>
<dd>曾敏杰是我最喜欢的歌手之一</dd>
</dl>
# 链接一个的定义图像---林志玲
<img src="img/linzhiling.jpg"/>
# 定义一个超链接--页面链接---Facebook - target属性表示去新的页面
<a href="https://www.facebook.com/" target="_blank">拜访一下扎克伯格</a>
# 下面是一对，配合起来使用：锚点在最上面（body下面），锚链接在最下面，另一个body的上面
# 锚点
<a id="top"></a>
# 锚链接
<a href="#top">回顶部</a>
# 功能性链接---邮箱
<a href="mailto:[email protected]">有事情，请联系墨墨</a>
# 功能性链接---QQ聊天
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=10001&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:957658:53" alt="点我聊一聊" title="点我聊一聊"/></a>