HTML页面属性与文本样式设置

需积分: 3 2 下载量 44 浏览量 更新于2024-08-16 收藏 1.15MB PPT 举报
该资源主要介绍了HTML中设置页面属性、文字字体、列表样式以及基本标记符和语法的相关知识,旨在帮助初学者掌握网页制作的基本技巧。 在HTML中,设置文字字体是通过`<style>`标签或者`<font>`标签来完成的。`<style>`标签通常位于`<head>`部分,用于定义全局样式,而`<font>`标签则可以直接在文本中应用样式,但现代网页设计更倾向于使用CSS来控制字体样式。文字的属性包括字体类型、大小、粗细、斜体和对齐方式。例如,可以使用`font-family`定义字体类型,`font-size`定义大小,`font-weight`定义粗细,`font-style`定义斜体,`text-align`定义对齐方式。 页面属性的设置涉及到背景颜色、背景图片、文本列表、页面边距和链接等元素。背景颜色可以通过`background-color`属性设定,背景图片则通过`background-image`属性,并使用URL指定图片路径。页面的边距可以使用CSS的`margin`属性调整,以控制内容区域与浏览器窗口边缘的距离。 列表在HTML中分为有序列表(`<ol>`)和无序列表(`<ul>`)。有序列表使用数字或字母表示顺序,无序列表则通常使用点或符号表示项目。列表项由`<li>`标签包裹。有序列表的`type`属性可以设定列表的计数样式,如`type="a"`为小写字母,`type="1"`为数字。无序列表可以使用`type`属性设定点的样式,如`type="circle"`为空心圆点。此外,还有缩进式列表(定义列表`<dl>`),由`<dt>`定义术语,`<dd>`定义描述。 HTML的基本标记符包括段落`<p>`、换行`<br>`、水平线`<hr>`,以及字体样式如粗体`<b>`、斜体`<i>`、下划线`<u>`,字体大小调整`<big>`和`<small>`。`<div>`用于创建分区,`<h1>`到`<h5>`用于定义不同级别的标题,而`<ol>`和`<ul>`则用于创建列表,`<li>`定义列表项。 HTML的语法包括一般标记和空标记。一般标记由起始和结束标记组成,如`<p>`和`</p>`,而空标记如`<br>`没有对应的结束标记。HTML标签通常是不区分大小写的,但为了代码规范,建议使用小写。同时,HTML标签允许嵌套,即一个标签可以包含另一个标签。 理解并熟练运用这些基础知识,将有助于构建结构清晰、样式丰富的网页。对于初学者而言,通过实践操作和不断练习,可以更好地掌握HTML的用法。

对下面的代码加注释:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> #backg { width: 919px; height: 272px; } div img { width: 300px; height: 222px; margin-top: 20px; margin-left: 10px; } #h3 { color: rgb(132, 106, 90); font-weight: 600; font-size: 23px; margin-top: -224px; margin-left: 340px; } #p1 { font-size: 14px; color: rgb(20, 111, 158); font-weight: 550; margin-top: 13px; margin-left: 340px; } #p2 { width: 575px; font-size: 13.2px; color: black; text-indent: 2em; margin-top: -3px; margin-left: 340px; } #p2 span { color: rgb(20, 111, 158); font-style: italic; text-decoration: underline; } #p3 { font-size: 14px; color: rgb(20, 111, 158); font-weight: 550; margin-top: 10px; margin-left: 340px; } #p3 span { color: red; font-size: 20px; font-weight: 800; } hr { width: 560px; margin-top: -2px; margin-left: 340px; } #p4 { color: rgb(132, 106, 90); font-weight: 540; font-size: 23px; margin-top: 12px; margin-left: 340px; } #p4 span { color: red; font-weight: 800; } </style> <body>
Web前端开发工程师

技术要求:

对常用的一些Js框架了解,如jQuery、YUuI等。掌握最基本的JavaScript计算方法编写。对目前互联网流行的网页制作方法(Web2.0) HTML+CSS,以及各大浏览器兼容性有很大的了解。对前沿技术(HTML5+CSS3)的基本掌握。Web前端技术你究竟掌握了多少...

更新时间:2015年05月19日20点(已有325人点赞)


相关技术文章 8

</body> </html>

2023-05-24 上传