[HeadFrist-HTMLCSS学习笔记]第一章Web语言：开始了解HTML

时间 2019-11-07

标签 headfrist htmlcss 学习笔记第一章 web 语言开始了解 html 栏目 HTML 繁體版

原文原文链接

[HeadFrist-HTMLCSS学习笔记]第一章Web语言：开始了解HTML

宏观了解Web是如何工做的

要创建Web页面，就须要用超文本标记语言（HyperText Markup Language，简写为HTML）编写一个文件，并将他们放在一个Web服务器上
一旦把文件放在Web服务器上，任何浏览器就能经过互联网获得你的Web页面

Web服务器能作什么

每一个Web服务器都会存储HTML文件，图像，声音等文件
服务器端就是一个链接到互联网的计算机，等待来自浏览器的请求
等待来自Web浏览器的请求，多是请求Web页面，图像或声音等
收到请求后，会查找所请求的资源，而后把找到的资源发给浏览器

Web浏览器能作什么

单机连接访问页面->浏览器向Web服务器请求一个HTML页面->获取这个页面，并在你的浏览窗口显示css

范例代码（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>

虽然页面结果挺丑的。。。
html

标记剖析

元素 = 开始标记 + 内容 + 结束标记
浏览器不关心空格，制表符，回车

遇到的问题

A smooth,mild blend of coffees from Mexico,Bolivia and Guatemala.web

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>

样式也好看了不少~
服务器