网站优化怎么做 有什么技巧,选择佛山顺德网站设计,soho做网站谷歌推广,外链交换平台在今天的博文中#xff0c;我们将围绕“新浪新闻”项目#xff0c;深入探讨HTML和CSS在网页制作中的基础应用。通过具体实例#xff0c;我们将学习如何设置图片、标题、超链接以及文本排版#xff0c;同时了解CSS的引入方式和选择器优先级#xff0c;以及视频和音频标签的…在今天的博文中我们将围绕“新浪新闻”项目深入探讨HTML和CSS在网页制作中的基础应用。通过具体实例我们将学习如何设置图片、标题、超链接以及文本排版同时了解CSS的引入方式和选择器优先级以及视频和音频标签的使用。
标题排版
图片标签 img
在网页中插入图片时我们主要使用img标签。这个标签有几个重要的属性
src指定图像的URL可以是绝对路径如网络地址或磁盘路径或相对路径相对于当前页面的位置。width 和 height分别设置图像的宽度和高度可以是像素值或相对于父元素的百分比。
标题标签 h1 到 h6
HTML提供了六级标题标签从h1到h6h1表示最重要的标题h6表示最不重要的标题。这些标签不仅用于定义文本的大小还帮助搜索引擎理解网页的结构。
水平线标签 hr
hr标签用于在HTML页面中插入一条水平线通常用于分隔内容区块。
标题样式
CSS引入方式
CSS层叠样式表用于控制网页的布局和样式。CSS可以通过三种方式引入 行内样式直接在HTML标签的style属性中定义样式虽然方便但不利于维护不推荐频繁使用。 html复制代码h1 stylecolor: #4D4F53; font-size: 24px;中国新闻网/h1内嵌样式在HTML文档的head部分使用style标签定义样式适用于单个页面的样式定义。 style h1 { color: #4D4F53; font-size: 24px; }
/style外联样式将样式定义在单独的.css文件中并通过link标签在HTML文档中引入适用于多个页面的样式共享。 html复制代码link relstylesheet hrefcss/news.css颜色的表示
CSS中颜色的表示方式主要有三种
关键字如red、green、blue等预定义的颜色名。RGB表示法通过红绿蓝三原色组合每项取值范围0-255如rgb(255, 0, 0)表示红色。十六进制表示法以#开头将数字转换成十六进制表示如#4D4F53表示新浪微博标题的颜色。
超链接
标签 a
标签用于定义超链接其href属性指定链接的目标地址target属性控制链接的打开方式_self为默认值在当前页面打开_blank在新窗口打开。
CSS属性text-decoration用于控制文本装饰如去除超链接下划线color用于定义文本颜色。
正文排版
视频与音频标签
视频标签 video用于嵌入视频内容src属性指定视频文件的URLcontrols属性显示播放控件width和height属性设置播放器的尺寸。音频标签 audio与video类似但用于嵌入音频内容。
文本排版
换行与段落br标签用于换行p标签用于定义段落。文本加粗strong和b标签都可以使文本加粗但strong在语义上表示重要内容而b仅用于样式加粗。
CSS样式
line-height设置行高影响文本的垂直间距。text-indent定义段落首行内容的缩进。text-align规定元素中文本的水平对齐方式如left、center、right。
注意事项
在HTML中无论输入多少个空格浏览器最终只会显示一个空格。如果需要保留多个空格可以使用空格占位符 。
页面布局与盒子模型
在网页设计中页面布局是至关重要的环节它决定了网页内容的展示方式和视觉效果。而理解盒子模型则是进行页面布局的基础。在本节中我们将继续深入探讨盒子模型及其在布局中的应用同时介绍版心居中布局这一常见且实用的布局方式。
盒子模型概述
在CSS中页面上的每个元素都可以被看作是一个盒子这个盒子由四个部分组成内容区域content、内边距区域padding、边框区域border和外边距区域margin。这四个部分共同构成了元素的盒模型决定了元素在页面上的位置和大小。
内容区域Content元素的实际内容区域如文本、图片等。内边距区域Padding内容区域与边框之间的空白区域用于控制内容与边框的距离。边框区域Border围绕内边距和内容区域的边界可以设置颜色、宽度和样式。外边距区域Margin边框外部的空间用于控制元素与其他元素之间的距离。
CSS盒子模型属性
在CSS中我们可以通过一系列属性来设置盒模型的各个部分
width 和 height分别用于设置元素的宽度和高度。border用于设置边框的样式如1px solid #000表示边框宽度为1像素、实线、颜色为黑色。padding用于设置内边距可以是单一值或分别设置上、右、下、左四个方向的内边距。margin用于设置外边距同样可以是单一值或分别设置四个方向的外边距。
值得注意的是当设置盒子的宽度和高度时默认情况下这些值只包括内容区域的宽度和高度而不包括内边距、边框和外边距。然而通过设置box-sizing属性为border-box可以改变这一行为使得宽度和高度包括内容、内边距和边框但不包括外边距。
版心居中布局
在网页设计中版心居中布局是一种常见的布局方式它能够使网页的主要内容在页面中居中显示从而提升用户体验。实现版心居中布局的一种简单方法是使用margin属性的auto值。
在CSS中我们可以为需要居中的元素通常是div标签设置左右外边距为auto同时指定一个固定的宽度。这样浏览器会自动计算左右外边距的值使得元素在父元素中水平居中。
示例代码如下
#center { width: 65%; /* 设置版心的宽度 */ margin: 0 auto; /* 上下外边距为0左右外边距自动计算以实现居中 */
}在HTML中我们只需要将需要居中的内容包裹在一个div标签内并为其设置idcenter属性即可应用上述CSS样式实现版心居中布局。
完整项目代码
根据以上前置知识我们就能自己实现一个网页新闻的排版了
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈:一个简单的标题/titlestyleh1 {color: #4D4F53;}#date {color: #968D92;}a {color: black;text-decoration: none;}p {text-indent: 35px;line-height: 40px;}#center {width: 65%;/* margin: 0% 17.5% 0% 17.5%; */margin: 0 auto;}/style!-- link relstylesheet href../css/1.css --
/headbodydiv idcenterimg src./news_logo.pnga hrefhttps://gov.sina.com.cn/ target_blank新浪政务/a 正文h1焦点访谈:初音ミク/h1hrspan iddate2023年03月02日 21:50/spanspana hrefhttps://tv.cctv.com/ target_blank央视网/a/spanhrvideo src../video/1.mp4 controls width950px/videoaudio src../audio/1.mp3 controls/audiopb央视网消息/b焦点访谈/pp一二三四五/pimg src../img/1.jpgp上山打老虎/pimg src../img/2.jpgp styletext-align: right;责任编辑洛天依 SN242/p/div/body/html
