《Web前端工程师修炼之道》学习笔记：第二部分

第二部分HTML结构化标记第4章 创建简单网页(HTML概述)第一步从内容开始练习4-1本人使用cursor作为编写器新建文件夹bistro并新建文件index.html编写以下内容Black Goose Bistro The restaurant The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients. Catering You have fun... well handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers. Location and Hours Seekonk, Massachusetts; Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight在浏览器打开刚才编写的index.html文件。图4.1 index.html文件在Chrome浏览器的显示内容可观察到浏览器忽略多个空格、换行此外浏览器还会忽略制表符、不可识别标签、注释中的文本。第2步文档结构化HTML元素由开始标记、内容、结束标记组成图4.2 HTML元素组成结构HTML中元素不区分大小写。没有内容的元素为空元素空元素可用添加图像到网页中。图4.3 HTML文档的最小结构1、第一行是一个文档类型声明说明这是一个HTML 5文档。2、html元素为根元素包含文档中所有的元素。3、html元素中文档分为head和body元素head元素包含关于文档本身的描述性信息例如标题、样式表、脚本、元标签(meta)等。4、meta元素提供文档本身的信息告诉浏览器如何处理文档内容例如在此处指明文档的字符编码。5、title元素告诉浏览器该网页的标题是什么这是HTML规范之一每个HTML文档都必须包含描述性的title。6、body元素包含我们希望浏览器想要显示的内容。练习4.2打开刚才创建的index.html文件并编写以下内容!DOCTYPE html html head meta charsetutf-8 titleBlack Goose Bistro/title /head body The restaurant The Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients. Catering You have fun... well handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers. Location and Hours Seekonk, Massachusetts; Monday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight /body /html在浏览器中打开index.html文件图4.4 上述修改后在浏览器中显示的内容第3步确定文本元素语义标记选择合适的HTML元素为当前内容进行描述。练习4-3打开index.html文件并编写以下内容!DOCTYPE html html head meta charsetutf-8 titleBlack Goose Bistro/title /head body h1Black Goose Bistro/h1 h2The restaurant/h2 pThe Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients./p h2Catering/h2 pYou have fun... emwell handle the cooking/em. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers./p h2Location and Hours/h2 pSeekonk, Massachusetts;/p pMonday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight/p /body /html在浏览器中打开index.html文件。图4.5 修改上述后浏览器显示的网页内容块元素(block)和内嵌元素(em)处理块元素时将元素按照矩形盒子堆积处理em元素时会突出显示内容。一般浏览器会使用默认样式来显示网页但Web开发者可以通过修改样式来更优雅地显示网页。图4.6 块元素和内嵌元素的显示第4步添加图像使用图像元素(img)、空元素和特性来给网页添加图像。图4.7 空元素-换行元素(br元素)特性用于阐明或修改元素的指示对于img元素src通过URL来提供图像文件的位置。图4.8 包含特性的img元素特性只出现在开始元素中不能出现在结束元素中。元素可以有多个特性用空格隔开不区分顺序。大多数特性后面有值其后跟着等号()。特性值放在引号内保持风格一致。有些特性是必须的例如img元素中必须有src和alt特性。每个元素可用的特性名都在HTML规范中Web开发者不能自创特性。练习4-4自己随意下载一个图片放在bistro文件夹下本人的图片名为blackgoose.png并编写index.html内容!DOCTYPE html html head meta charsetutf-8 titleBlack Goose Bistro/title /head body h1img srcblackgoose.png altBlack Goose Bistro logo /brBlack Goose Bistro/h1 h2The restaurant/h2 pThe Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients./p h2Catering/h2 pYou have fun... emwell handle the cooking/em. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers./p h2Location and Hours/h2 pSeekonk, Massachusetts;/p pMonday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight/p /body /html打开浏览器并显示index.html文件中的内容:图4.9 在浏览器中显示图片的效果第5步使用样式表来改变外观使用CSS来美化刚才的Black Goose Bistro主页。练习4-5打开编写index.html文件!DOCTYPE html html head meta charsetutf-8 titleBlack Goose Bistro/title style body { background-color: #faf2e4; margin: 0 15%; font-family: sans-serif; } h1 { text-align: center; font-family: serif; font-weight: normal; text-transform: uppercase; border-bottom: 1px solid #57b1dc; margin-top: 30px; } h2 { color: #d1633c; font-size: 1em; } /style /head body h1img srcblackgoose.png altBlack Goose Bistro logo /brBlack Goose Bistro/h1 h2The restaurant/h2 pThe Black Goose Bistro offers casual lunch and dinner fare in a hip atmosphere. The menu changes regularly to highlight the freshest ingredients./p h2Catering/h2 pYou have fun... emwell handle the cooking/em. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers./p h2Location and Hours/h2 pSeekonk, Massachusetts;/p pMonday through Thursday 11am to 9pm, Friday and Saturday, 11am to midnight/p /body /html图4.10 在浏览器显示CSS样式表的美化效果图4.11 该章节中所使用的HTML元素第5章 标记文本段落元素p/p标题元素h1/h1h2/h2...图5.1 不同标题元素的显示效果水平分割线hr图5.2 水平分割线的显示效果群组标题hgroup/hgroup该hgroup元素允许将一个标题与任意次要内容例如子标题、副标题或口号组合在一起。在hgroup中这些类型的内容也表示为p元素。图5.3 群组标题元素的显示效果在HTML中主要列表形式有三种无序列表、有序列表、定义列表。无序列表元素ul无序列表中的列表项使用li/li。有序列表元素使用ol/ol同样有序列表中的列表项使用li/li。定义列表元素dl/dldt元素为一个表项dd元素为表项的“定义”。HTML中的代码无序列表的显示效果块级引用元素blockquote、预格式化文本pre、独立的流内容元素figure和figcpation作用是对内容进行分类。区段元素section/section、独立内容article/article、侧栏aside/aside、导航nav/nav、页眉header/header、页脚footer/footer、地址address/address。图5.4 文本级别语义元素泛型块级元素div和泛型内联元素spanid和class特性id特性用于给HTML文档中的元素指派唯一的标识符class用于组合相似的元素。所有字符引用都以“”开头以“;”结尾。图5.5 常见特殊字符及其引用第6章 添加链接使用锚元素a在a中给出href特性的URL地址来添加链接两种指定URL方式绝对路径和相对路径。链接到网页中的指定点在a中的href特性指定到网页中元素的id。若是要链接到另一个文档的片段时需要指定该文档的绝对或相对路径#(元素id)。使用HTML标记打开新窗口可以在a元素中使用target特性设置target_blank会使得每次点开这个链接的时候会让浏览器打开新窗口。还有邮件链接和电话链接。第7章 添加图片使用img元素插入图片还需指定特性src和alt另外img是空元素alt提供替换文本档图片失效的时候会显示alt中的文本。使用特性width和height来指定图片的宽度像素和高度像素。窗口中的窗口使用ifram元素可以将一个单独的HTML文件或其他资源内嵌到一个HTML文件中。第8章 表格标记表格元素table/table、表行tr/tr、表头th/th、表格单元格中的数据td/td。图8.1 创建表格基本结构的元素合并单元格使用clospan属性(列合并)和rowspan属性(行合并)使用caption元素给表添加一个标题或显示表格附近的简短说明。使用scope属性对表头单元格进行配置以应用于指定的行或者列。图8.2 与表格相关的元素和属性第9章 表单表单由两部分组成第一部分是网页看到的表单本身另一部分是服务器端的应用程序或脚本。图9.1 Web表单提交时后台运行流程表单元素form/form使用form元素来将表单添加到网页中。action特性用于处理表单的程序或者脚本的URLmethod特性指定信息将如何发送到服务器上POST方法只有服务器才能看到请求的内容GET方法编码后的表单数据附在URL中。变量和内容name特性表示控件的变量名。单行文本输入控件input多行文本输入控件textarea/textarea。专用文本输入域密码输入域、搜索域、电子邮件地址、电话号码、URL地址等。按钮图像按钮、自定义输入按钮、button元素单选和复选框按钮。菜单select元素添加下拉菜单和滚动菜单添加到表单中组合菜单选项元素optgroup。文件选择控件使用input元素设置type特性为file就可以使用户选择硬盘中的文档。隐藏控件使用input元素设置type特性为hidden。日期和时间控制在input元素中设置type特性为date、time、datetime、datetime-local、month、week等。图9.2 日期和时间选择器输入数字输入和颜色选择器等等输入控件。label元素表示用户界面中某个元素的说明fieldset元素表示表单控件的逻辑组和legend元素表示内容标题。第10章 HTML5该章节结构如下HTML历史 ↓ HTML5文档结构与新元素 ↓ 浏览器API ↓ video / audio ↓ canvas JavaScript绘图注本章内容不为重点故不再赘述可自行翻阅浏览。