[HeadFrist-HTMLCSS学习笔记]第一章Web语言：开始了解HTML
[HeadFrist-HTMLCSS学习笔记]第一章Web语言：开始了解HTML
宏观了解Web是如何工作的
- 要建立Web页面，就需要用超文本标记语言（HyperText Markup Language，简写为HTML）编写一个文件，并将他们放在一个Web服务器上
- 一旦把文件放在Web服务器上，任何浏览器就能通过互联网得到你的Web页面
Web服务器能做什么
- 每个Web服务器都会存储HTML文件，图像，声音等文件
- 服务器端就是一个连接到互联网的计算机，等待来自浏览器的请求
- 等待来自Web浏览器的请求，可能是请求Web页面，图像或声音等
- 收到请求后，会查找所请求的资源，然后把找到的资源发给浏览器
Web浏览器能做什么
单机链接访问页面->浏览器向Web服务器请求一个HTML页面->获取这个页面，并在你的浏览窗口显示
范例代码（HTML）
<html>
<head> <!-- 页面“Head”开始 -->
<title>Head First Lounge</title> <!-- 网页名字 -->
</head> <!-- Head结束 -->
<body> <!-- 页面主体body开始 -->
<h1>Welcome to the Head First Lounge</h1> <!-- 一级标题 -->
<img src="drinks.gif"> <!-- 插入图片 -->
<p> <!-- 开始一个段落 -->
Join us any evening for refreshing elixirs,
conversation and maybe a game or
two of <em>Dance Dance Revolution</em>. <!-- 强调 -->
Wireless access is always provided;
BYOWS (Bring your own Web server).
</p> <!-- 结束一个段落 -->
<h2>Directions</h2> <!-- 二级标题 -->
<p> <!-- 开始另一个段落 -->
You'll find us right in the center of
downtown Webbille. Come join us!
</p> <!-- 段落结束 -->
</body> <!-- 页面主体结束 -->
</html>
浏览器创建的页面
- 浏览器读HTML时，会翻译文本中的所有标记（标记是括起来的词），例如
<head>,<p>,<h1> - HTML会确定标题，图片所放的位置，后期可以通过CSS增加新的样式
- 浏览器显示的标题一共有6级，从
<h1>到<h6>,字体从大到小，一般不会用到<h3>
自己第一个html文件！！
<html>
<head>
<title>Starbuzz Coffe</title>
</head>
<body>
<h1>Starbuzz coffee Beverages</h1>
<h2>House Blend,$1.49</h2>
<p>A smooth,mild blend of coffees from Mexico,Bolivia and civatenala.</p>
<h2>Mocha cafe catte,$2.35</h2>
<p>Espresso,steamed milk and hocolate syryp</p>
<h2>Cappuccino,$1.89</h2>
<p>Amixture of espresso,steamed milk and foam.</p>
</body>
</html>
虽然页面结果挺丑的。。。
标记剖析
- 元素 = 开始标记 + 内容 + 结束标记
- 浏览器不关心空格，制表符，回车
遇到的问题
A smooth,mild blend of coffees from Mexico,Bolivia and Guatemala.
id这个不太懂，还正在寻求解决认识style元素
<style>元素放在HTML的首部里- 与替他元素类似，有一个开始标志和一个结束标志
<style>标记可以加一个属性type,可以表明所使用的样式。如：<style type="text/css"><style>定义页面样式
<style type="text/css">
body{ <!-- 表示应用于HTML <body>元素中的内容 -->
background-color: #d2b48c; <!-- 背景颜色 -->
margin-left: 20%; <!-- 左页边距 -->
margin-right: 20%; <!-- 右页边距 -->
border: 2px dotted black; <!-- 定义页面主体周围的边距是虚线，颜色为黑色 -->
padding: 10px 10px 10px 10px; <!-- 在页面主体周围创建内边距 -->
font-family: sans-serif; <!-- 定义文本使用的字体 -->
}
</style>
样式也好看了很多~
