十一月二日课堂笔记-HTML

最新推荐文章于 2024-04-29 11:06:38 发布

再让我多睡几分钟

最新推荐文章于 2024-04-29 11:06:38 发布

阅读量389

点赞数

文章标签： html 标签

本文链接：https://blog.csdn.net/zaiaj/article/details/78425555

版权

HTML简介

HTML是用来描述网页的一种语言。
HTML指的是超文本标记语言(HyperTextMarkupLanguage)。·
HTML不是一种编程语言，而是一种标记语言(markuplanguage)。标记语言是一套标记标签(markuptag)。
HTML使用标记标签来描述网页。
2. 三个问题

HTML语言是怎么写出来的？
HTML是前端开发工程师编写的，可以使用notepad++，sublime text，editplus以及一些其他的编辑器进行编写。
我们看到的网页中的HTML是从哪里来的？
我们可以打开chrome,键入F12，进入开发者工具，点击NETWORK标签，然后在地址栏键入百度的域名，我们可以立即在工具的下方看到所有从服务器中返回的文件，包括HTML文件，CSS文件，图片文件以及JavaScript文件等。由此可见，HTML文件是由服务器返回的。
用什么解析HTML？
浏览器将HTML,CSS,JavaScript等语言解析成丰富多彩的网页。
浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您想要访问的网络资源。
浏览器解释并显示HTML文件的方式是在HTML和CSS规范中指定的。这些规范由网络标准化组织W3C（万维网联盟）进行维护。多年以来，各浏览器都没有完全遵从这些规范，同时还在开发自己独有的扩展程序，这给网络开发人员带来了严重的兼容性问题。如今，大多数的浏览器都开始尽量遵从规范。

HTML、CSS、JavaScript的关系

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript十分强大，可以用来实现网页上的特效效果，用户交互以及数据处理甚至网络通信等。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

2.1标签

HTML标记标签通常被称为HTML标签(HTMLtag)。HTML标签是由尖括号包围的关键词，比如。HTML标签通常是成对出现的，比如和。+

尝试使用HTML标签

打开记事本，我们在记事本中键入如下代码。

<html>
    <body>  
        <h1>这是我的第一节HTML课</h1>  
        <p>这是我的课堂笔记</p>  
    </body> 
</html>

写完代码后保存，将文件保存为test.html文件。
点击打开，我们得到了一个非常简单的网页。
html:之间的文本描述网页。
body:是网页的可见页面内容。
h1:网页的文本的标题。
p:之间的文本显示成段落。

2.3 第一个HTML页面

在上一节中，我们写了第一个相对完整的HTML页面。
现在，我们接到一个紧急的开发任务，为CODING COFFEE咖啡馆开发一个咖啡菜单页。

 <!DOCTYPE html>
 <html>
    <head>
        <title>Starbuzz Coffee</title>
        <style>
            body {
                background-color: #d2b48c;
                margin-left: 20%;
                margin-right: 20%;
                border: 2px dotted black;
                padding: 10px 10px 10px 10px;
                font-family: sans-serif;
            }   
        </style>
    </head>
    <body>
        <h1>Starbuzz Coffee Beverages</h1>

        <h2>House Blend, $1.49</h2>
        <p>A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>

        <h2>Mocha Caffe Latte, $2.35</h2>
        <p>Espresso, steamed milk and chocolate syrup.</p>

        <h2>Cappuccino, $1.89</h2>
        <p>A mixture of espresso, steamed milk and milk foam.</p>

        <h2>Chai Tea, $1.85</h2>
        <p>A spicy drink made with black tea, spices, milk and honey.</p>
    </body>
</html>

2.4工具的基本使用

由于记事本的功能很单一，显示效果也不能满足网页开发的要求，所以我们需要使用其他开发工具来帮助我们进行开发。
在初学阶段，我们不适合使用有大量代码提示的开发工具，代码提示功能会降低初学者的代码熟练度，所以我们推荐轻量级的编辑器notepade++以及editPlus。
这两款软件下载和安装都十分简单，不作过多的介绍了。
需要注意的是，我们在用editplus编写代码时，先将默认的字符编码设置为utf-8.
在editplus菜单中，Tools->Preferences->Files设置默认编码为UTF-8。
在度过初学阶段后，我们需要写一些代码量较多的网页时，我们可以使用sublime text进行开发。
sublime text在前端开发人员中非常流行，有非常多的插件可以使用。这里我们推荐使用emmet插件帮助我们进行开发。
不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

<html>中的内容描述网页。
<body>中的内容是可见的页面内容。
<head>中的内容描述网页头信息。
<title>中的文本显示为网页的标题。
<h1>中的文本是正文一级标题。
<p>中的文本为网页中的段落。
<a>标签为网页中的超链接。

2.5 标题标签
标题（Heading）是通过<h1> - <h6>标签进行定义的。<h1>定义最大的标题。<h6>定义最小的标题。
不要仅仅是为了生成粗体或大号的文本而使用标题，搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是h2（次重要的），再其次是h3，以此类推。

<html>
    <body>
        <h1>这是一个标题。</h1>
        <h2>这是一个标题。</h2>
        <h3>这是一个标题。</h3>

        ...
        <h6>这是一个标题。</h6>
    </body>
</html>

运行后，我们看到，标题中的文字从大到小(h1-h6)，但是我们在开发中不可以将六个级别的标题当作大小控制标签使用，我们应该根据网页的层次结构来使用标题。搜索引擎的爬虫程序，也会根据标题大小来确定网页中内容的结构和权重。
2.6 hr和P标签

p标签

HTML 可以使用P标签将文档分割为若干段落。
我们找到之前写的页面，用

标签对它进行一些简单处理。

<p>A smooth, mild blend of coffees from Mexico, </p><p>
Bolivia and Guatemala.A smooth, mild blend of coffees from Mexico, Bolivia and Guatemala.</p>

使用<p>标签后，我们发现原本的文字被分成两段，发生了换行。
如果需要在不产生一个新段落的情况下进行换行（新行），可以使用<br \>标签。
2. <hr>标签

有些时候，我们需要在段落之间或标题和正文之间画出一条横线作为区分，我们可以使用<hr>标签。
我们可以在之前的咖啡菜单页面中，将每一种咖啡用<hr>标签分隔开来。

要想输入空格，必须写入$nbsp;

2.8 <img>图像标签

在HTML中，图像由<img>标签定义。 <img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。 <img src="" alt="some_text">
URL 指存储图像的位置。浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。
我们现在起使用标签在咖啡菜单页面中加入咖啡产品图。
图像标签拥有以下三个属性：+

src：标识图像的位置；
alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
<img src="myimage.gif" alt = "My Image" title = "My Image" />
我们将制作一下咖啡馆的首页，将之前的咖啡菜单作为产品页使用

html <html> <head> <title>Head First Lounge</title> </head> <body> <h1>欢迎观临CODING COFFEE</h1> <img src="images/drinks.gif"> <p> 敬请关注我们定期更新的产品列表, CODING COFFEE是一家只对程序员开放的 <em>互联网咖啡馆</em>. 无人看管，进门需要输入正确的代码！ </p> <h2>我们的分店</h2> <p> 你可以在世界各地发现CODING COFFEE的分店，详情查看分店列表. Come join us! </p> </body> </html>

2.9 路径概念

路径概念就相当于有人问你青鸟的王老师在哪里？当你们在青鸟大楼里和不在大楼里时，描述的方式是不一样的。
当你们在青鸟大楼里，你可能会说，王老师在出门右拐的第一教室里上课呢！
当你们不在青鸟大楼里时，你可能会说，王老师在跃龙南路*号，青鸟大楼2楼，青鸟IT教育的第一教室。
相对路径-顾名思义，相对路径就是相对于当前文件的路径。网页中一般表示路径使用这个方法。
绝对路径-绝对路径就是你的主页上的文件或目录在硬盘上真正的路径。绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，比如，你的Perl程序是存放在c:/apache/cgi-bin下的，那么c:/apache/cgi-bin就是cgi-bin目录的绝对路径。
在网络中，以http开头的链接都是绝对路径，绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，绝对路径一般在CGI程序的路径配置中经常用到，而在制作网页中实际很少用到。
1.相对路径使用的特殊符号

“./”：代表目前所在的目录。
“../”：代表上一层目录。
以”/”开头：代表根目录。
2.优缺点及使用

1、绝对路径的优点
如果网页位置改变，里面的链接还是指向正确的URL。
2、绝对路径的缺点：
网页中资源容易被盗用。
3、相对路径的优点：
容易移动内容，可以整个目录移动。
4、相对路径的缺点：
部分内容页面换了位置时，链接容易失效。

2.10 超级链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接，点击链接可以从一张页面跳转到另一张页面。
HTML使用标签来设置超文本链接，使用href来描述链接的地址，使用target属性定义被链接的文档在何处显示，定义target属性为_blank可以在新的页面打开。
<a href="http://www.ntqingniao.com">南通青鸟教育</a>
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
1.完善CODING COFFEE首页
我们上一节的路径概念和超级连接，为首页加上跳转。

<html>
  <head>
    <title>Head First Lounge</title>
  </head>
  <body>
    <h1>欢迎观临CODING COFFEE</h1>
    <img src="images/drinks.gif">
    <p>
       敬请关注我们定期更新的<a href="beverages/elixir.html">产品列表</a>, 
       CODING COFFEE是一家只对程序员开放的 
       <em>互联网咖啡馆</em>.
       无人看管，进门需要输入正确的代码！
    </p>
    <h2>我们的分店</h2>
    <p>
     你可以在世界各地发现CODING COFFEE的分店，
     详情查看<a href="about/directions.html">分店列表</a>. 
      Come join us!
    </p>
  </body>
</html>

2.11 列表

在许多网站上，我们都能看到类似下图的排行版、新闻列表等内容，对于这些内容，我们使用列表标签进行开发。
列表分为有序列表和无序列表。
1.无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表使用<ul>标签。 <ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul>
2.有序列表
如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，这类信息展示就可以使用<ol>标签来制作有序列表来展示。 <ol>
<li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol>
<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始.
3.为CODING COFFEE制作门店列表页

 <body>
    <h1>加盟门店</h1>
      <ul>
        <li>北京朝阳区奥林匹克公园旗舰店</li>
        <li>纽约布鲁克林14大街店</li>
        <li>曼彻斯特老特拉福德球场店</li>
        <li>索马里海岸121军火仓库店</li>
        <li>南通市崇川区医校巷3号特邀门店</li>
      </ul>
  </body>
  ```
**2.12 表格**
1.表格简介
HTML中的表格可以大致分为三个部分：
thead ---------表格的页眉
tbody ---------表格的主体
tfoot ---------定义表格的页脚
thead, tbody, tfoot 相当于三间房子，每间房子都可以用来放东西。
<tr> </tr> 这个标签就是放在三间房子里面的东西，每一个<tr> </tr>就是表格一行。
表格的每一行被分为一个个单元格。


我们简单尝试写一个表格：

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

2. <colgroup>的使用
<colgroup>标签用于对表格中的列进行组合，以便对其进行格式化。
<col> 标签规定了 <colgroup> 元素内部的每一列的列属性。
```<table border="2" cellpadding="20" cellspacing="1">
        <colgroup>
            <col span="4" style="background-color: pink;">
        </colgroup>
        <tr>
            <th>职位名</th>
            <th>工作地点</th>
            <th>职位等级</th>
            <th>薪酬</th>
        </tr>
        <tr>
            <td>咖啡师</td>
            <td>纽约</td>
            <td>L3</td>
            <td>6000$</td>
        </tr>
        <tr>
            <td>咖啡师助理</td>
            <td>伦敦</td>
            <td>L2</td>
            <td>5000$</td>
        </tr>
        <tr>
            <td>大中华区副总裁</td>
            <td>北京</td>
            <td>L8</td>
            <td>面议</td>
        </tr>
        <tr>
            <td>全球副总裁</td>
            <td>佛罗伦萨</td>
            <td>L9</td>
            <td>面议</td>
        </tr>
    </table>
    ```
3.合并单元格和表格的间距
colspan属性：合并列
rowspan属性：合并行
以上两个属性均作用在单元格上，并且属性值的数字代表算上单元格本身，一共合并的单元格个数。




<div class="se-preview-section-delimiter"></div>

```html
<table border="1">
    <tr>
        <td rowspan="2">第一行第一列</td>
        <td colspan="2" >第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
        <td>第三行第三列</td>
    </tr>
</table>

cellpadding属性：单元格边框与内容的间距。
cellspacing属性：单元格之间的间距。

<table border="1" cellpadding="20" cellspacing="30">
    <tr>
        <td rowspan="2">第一行第一列</td>
        <td colspan="2" >第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第二列</td>
        <td>第二行第三列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
        <td>第三行第三列</td>
    </tr>
</table>

3.1 表单域的原理

用之前学习的标签，我们暂时还不能完成与网页的交流，网页无法获取我们的输入信息。
在浏览网页时，有很多的场景需要用户输入来完成特定的交互，比如注册、登录、问卷调查等，我们可以使用表单来完成这些操作。

1.什么是表单

表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单在网页中主要负责采集数据。

<form  method="传送方式"  action="http://www.codingcofee.com/user/register.php">

：标签是成对出现的，以开始，以结束。
action：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
method：数据传送的方式（get/post）。
表单中还包括文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、提交按钮和文件上传框等。

3.2 文本框和密码框

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

type：当type=”text”时，输入框为文本输入框，当type=”password”时,输入框为密码输入框。
name：告诉服务器，我们提交的这个value值代表的什么。
value：为文本输入框设置默认值。(一般起到提示作用)。

3.3 单选框和复选框

在使用表单时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。

<input  type="radio/checkbox"  value="值"  name="名称"  checked="checked"/>

type:当type=”radio”时，控件为单选框。当type=”checkbox”时，控件为复选框。
value：提交数据到服务器的值（后台程序PHP使用）。
name：告诉服务器，我们提交的这个value值代表的什么。
checked：当设置checked=”checked”时，该选项被默认选中。

3.3 下拉列表框

下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。
value：提交数据到服务器的值。
selected=”selected”：设置selected=”selected”属性，则该选项就被默认选中。
下拉列表也可以进行多选操作，在标签中设置multiple=”multiple”属性，就可以实现多选功能，在windows操作系统下，进行多选时按下Ctrl键同时进行单击（在Mac下使用Command+单击），可以选择多个选项。

多行文本和重置按钮

多行文本

当用户需要在表单中输入大段文字时，需要用到文本输入域。
文本
标签是成对出现的，以开始，以结束。
name：指定输入框的名字。
cols ：多行输入域的列数。
rows ：多行输入域的行数。
在标签之间可以输入默认值。
2.上传

在实际开发中，我们经常会遇到要求用户上传头像图片或者添加附件在表单中的场景。
在HTML中，文件上传同样也使用input标签。

提交按钮和重置按钮

3.6 提交按钮

在表单中有两种按钮可以使用，分别为：提交按钮、重置。当用户需要提交表单信息到服务器时，需要用到提交按钮。当我们需要重置表单信息的时候，需要用到重置按钮。
提交按钮

type：只有当type值设置为submit时，按钮才有提交作用。
value：按钮上显示的文字。

3.7 提交按钮

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。

type：只有当type值设置为reset时，按钮才有重置作用。
value：按钮上显示的文字。

3.8 为CODING COFFEE加入在线购买页面

大家还记得CODING COFFEE咖啡馆吗？现在，它非常火爆，很多顾客排队也买不到咖啡。
所以，我们打算在网上接收咖啡的订单，送货上门！
试着使用表单获取用户的订单信息！

<body>

    <h1>CODING COFFEE在线订购</h1>
    <h2>请填写您的真实信息，我们将在24小时内送货门</h2>

    <form action="http://codingcoffee.com/onlineorder.php" method="post">
        <p>
                    选择豆子类型：
                      <select name="beans">
                        <option value="House Blend">House Blend</option>
                        <option value="Bolivia">Shade Grown Bolivia Supremo</option>
                        <option value="Guatemala">Organic Guatemala</option>
                        <option value="Kenya">Kenya</option>
                      </select>
        </p>
        <p>
                      类型:<br>
                      <input type="radio" name="beantype" value="whole">
                      完整豆子
                      <br>
                      <input type="radio" name="beantype" value="ground" checked> 
                      咖啡粉
        </p>
        <p>
                数量: <input type="number" name="bags" min="1" max="10">
        </p>
        <p>
                最晚到达日期: <input type="date" name="date">
        </p>
        <p>
                    Extras:<br>
                      <input type="checkbox" name="extras[]" value="giftwrap">
                      礼盒包装
                      <br>
                      <input type="checkbox" name="extras[]" value="catalog" checked>
                      包含购物清单
        </p>
        <p>
                      送货地址: <br>
                      姓名:
                        <input type="text" name="name" value=""><br>
                      具体地址:
                        <input type="text" name="address" value=""><br>
                      城市:
                        <input type="text" name="city" value=""><br>
                      省:
                        <input type="text" name="state" value=""><br>
                      区:
                        <input type="text" name="zip" value=""><br>
                      电话号码:
                        <input type="tel" name="phone" value=""><br>
        </p>
        <p>
                      客户留言:<br>
                      <textarea name="comments"></textarea>
        </p>
        <p>
                      <input type="submit" value="现在购买">
                      <input type="reset" value="重新填写">
        </p>
      </form>
  </body>

再让我多睡几分钟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十一月二日课堂笔记-HTML

2.12 表格1.表格简介HTML中的表格可以大致分为三个部分： thead ———表格的页眉 tbody ———表格的主体 tfoot ———定义表格的页脚thead, tbody, tfoot 相当于三间房子，每间房子都可以用来放东西。这个标签就是放在三间房子里面的东西，每一个就是表格一行。表格的每一行被分为一个个单元格。我们简单尝试写一个表格： H
复制链接

扫一扫