购物网网站建设,现在到底该不该买房子,深圳专业极速网站建设,怎么查网站是哪家公司做的【DAY1】
从今天开始Javaweb的学习了#xff0c;学了Javaweb基础知识#xff0c;HTML CSS常见的标签和样式 文章目录【DAY1】HTML-CSS1#xff09;初识2#xff09;入门3#xff09;常见标签和样式标题标题排版标题样式正文正文排版正文样式整体布局HTML-CSS
1#xff…【DAY1】
从今天开始Javaweb的学习了学了Javaweb基础知识HTML CSS常见的标签和样式
文章目录【DAY1】HTML-CSS1初识2入门3常见标签和样式标题标题排版标题样式正文正文排版正文样式整体布局HTML-CSS
1初识
web标准也称网页标准由一系列的标准组成三个组成部分 HTML负责网页的结构页面元素和内容CSS负责网页的表现页面元素的外观、位置等页面样式 颜色大小JavaScript复制网页的行为
2入门
HTML超文本标记语言
超文本超越文本的现在比普通文本更大除了文本信息还可定义图片、音频等标记语言由标签标签名构成的语言 HTML表都是定义好的h1展示图片 img展示图片 video展示视频 CSS层叠样式表用于控制页面的样式 入门
htmlhead !--头部--titleHTML快速入门/title/headbody !--内容--h1Hello HTML/h1 !--h1表示一级标题--img srcimg/1.png/body
/html!--在vscode输入!生成基本框架--!-- 声明文档类型为 HTML--
!DOCTYPE html
html langen
head!--字符编码为UTF-8--meta charsetUTF-8!--设置手机上的屏幕宽度和缩放比例让其在手机上也能正常显示--meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body/body
/htmlctrl / 自动生成注释
HTML的标签特点
html标签不区分大小写建议小写html标签的属性值使用单引号/双引号都行html语法结构松散
3常见标签和样式
标题
标题排版 标题标签h1 - h6 超链接标签a href....../a href指定资源访问的utl target指定在何处打开资源链接 _self默认值在当前页面打开 _blank在空白页面打开 示例 【练习1】2025.8.15.1
【练习1】2025.8.15.1 MDN 2025年8月15日
标题样式
CSS引入方式 行内样式 写在标签的style属性中配合JavaScript使用 span stylecolor: gray;2025年8月15日/span内部样式 写在style标签中可以写在页面任何位置但通常写在head标签中 stylespan{color: gray;}
/style外部样式 写在单独的一个.css文件中需要通过link标签在网页中引用 !-- news.css --span{color: gray;}!-- 外部样式 --
link relstylesheet hrefcssnews.css/link示例 【练习1】2025.8.15.1
【练习1】2025.8.15.1
MDN
2025年8月15日
颜色表示形式 备注: 要想拾取某一个网页中的颜色我们可以借助于截图软件的拾色器插件来完成
CSS选择器是用来选取需要设置样式的元素的 优先级id选择器类选择器元素选择器 示例 !--类选择器--style.cls{color: gray;}/stylespan classcls2025年8月15日/span去除超链接中的下划线
/* 超链接去除下划线 */
a{text-decoration: none;}正文
正文排版 绝对路径: 绝对磁盘路径: img srcC:\Users\Administrator\Desktop\HTML\img\logo.png绝对网络路径: img srchttps://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png 相对路径:
./ : 当前目录 , ./ 可以省略的
…/: 上一级目录 示例 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title【练习1】2025.8.15.1/titlestyle.cls{color: gray;}/* 超链接去除下划线 */a{text-decoration: none;}/style
/head
body!-- ----------标题---------- --h1【练习1】2025.8.15.1/h1a hrefhttps://developer.mozilla.org/zh-CN/MDN/aspan classcls2025年8月15日/spanbr!-- ----------正文---------- --!-- 定义一个视频 --!-- video标签属性 src:视频地址controls:显示视频控制器autoplay:自动播放width:视频宽度 建议宽度高度只设置一个 另一个会等比例缩放 height:视频高度 单位px像素 %百分比占用父元素的百分比poster:视频封面--video srcvideo/news.mp4 controls autoplay width80%/video!-- 音频标签audio srcaudio/news.mp3 controls autoplay/audio --!-- 段落标签 --p这是一个段落/p!-- 段落之间自动换行不需要换行标签 --p这是第二个段落/p!-- 换行标签 --br123456!-- 插入一个动图 --!-- src图片的访问地址1.绝对路径1.1 绝对磁盘路径 C:\Users\Administrator\Desktop\img\1.gif1.2 绝对网络路径 http://www.baidu.com/img/1.gif2.相对路径--img srcimg/1.gif width80%/img/body
/html
正文样式 加粗展示
!--b标签--
b.../b!--strong标签--
strong.../strong设置行高
p{/* 设置行高 */line-height: 2; /*两倍行高*/}设置缩进 使用空格实体字符 nbsp; nbsp;nbsp;这是一行字为所有段落设置首行缩进 p{/* 设置首行缩进 */text-indent: 2em;/*缩进两个字符*/}整体布局
/* 让整体版面居中显示 */#content-container{width: 70%;/*宽度*/margin-left: auto;margin-right: auto;}把body内的所有内容括在div/div中并设置id选择器
bodydiv idcontent-container!-- ----------标题---------- --h1【练习1】2025.8.15.1/h1a hrefhttps://developer.mozilla.org/zh-CN/MDN/aspan classcls2025年8月15日/spanbr!-- ----------正文---------- --!-- 定义一个视频 --!-- video标签属性 src:视频地址controls:显示视频控制器autoplay:自动播放width:视频宽度 建议宽度高度只设置一个 另一个会等比例缩放 height:视频高度 单位px像素 %百分比占用父元素的百分比poster:视频封面--video srcvideo/news.mp4 controls autoplay width100%/video!-- 音频标签audio srcaudio/news.mp3 controls autoplay/audio --!-- 段落标签 --pbnbsp;nbsp;这是一个段落/b/p!-- 段落之间自动换行不需要换行标签 --p这是第二个段落/p!-- 换行标签 --br123456!-- 插入一个动图 --!-- src图片的访问地址1.绝对路径1.1 绝对磁盘路径 C:\Users\Administrator\Desktop\img\1.gif1.2 绝对网络路径 http://www.baidu.com/img/1.gif2.相对路径--img srcimg/1.gif width100%/img
/div/body盒子模型
盒子页面中所有的元素标签都可以看做是一个 盒子由盒子将页面中的元素包含在一个矩形区域内通过盒子的视角更方便的进行页面布局。盒子模型组成内容区域content、内边距区域padding、边框区域border、外边距区域margin。 布局标签实际开发网页中会大量频繁的使用 div 和 span 这两个没有语义的布局标签。标签div span特点div标签 一行只显示一个独占一行宽度默认是父元素的宽度高度默认由内容撑开可以设置宽高width、height span标签 一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高width、height
div {width: 200px; /* 宽度 */height: 200px; /* 高度 */box-sizing: border-box; /* 指定width height为盒子的高宽 */background-color: aquamarine; /* 背景色 */padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */}备注 上述的padding、margin属性值可以是4个值、也可以是两个值、也可以是一个值具体的含义如下padding: 20px 20px 20px 20px; ------- 表示上、右、下、左都是20pxpadding: 20px 10px; ---------------------- 表示上下是20px左右是10pxpadding: 20px; ----------------------------- 表示上、右、下、左都是20px 笔记内容主要基于黑马程序员的课程讲解旨在加深理解和便于日后复习 希望这篇笔记能对大家的学习有所帮助有啥不对的地方欢迎大佬们在评论区交流
