怎么用php语言做网站,招聘网站开发设计文档,国税网站建设调查报告,上海装修公司排名前30什么是HTML,CSS#xff1f;
HTML(HyperText Markup Language):超文本标记语言。
超文本:超越了文本的限制#xff0c;比普通文本更强大。除了文字信息#xff0c;还可以定义图片、音频、视频等 标记语言:由标签构成的语言
HTML标签都是预定义好的。例如:使用a
HTML(HyperText Markup Language):超文本标记语言。
超文本:超越了文本的限制比普通文本更强大。除了文字信息还可以定义图片、音频、视频等 标记语言:由标签构成的语言
HTML标签都是预定义好的。例如:使用a展示超链接使用img展示图片vide0展示视
HTML代码直接在浏览器中运行HTML标签由浏览器解析。
CSS(Cascading Style Sheet):层叠样式表用于控制页面的样式(表现) HTML结构标签
htmlheadtitle标题/title/headbody/body
/html
特点
HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散
1.标题标签
标签:h1../h1(h1 →h6 重要程度依次降低)
注意:HTML标签都是预定义好的不能自己随意定义。
2.水平线标签 hr
用于在网页界面添加一条水平线
3.图片标签
img src 图片路径 widthheight
width大小有两种单位
一种是像素点px)
另一种是百分比%
标签使用样例
!-- 文档类型为HTML --
!DOCTYPE html
html langen
head!-- 字符集为UTF-8 --meta charsetUTF-8!-- 设置浏览器兼容性 --meta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈中国底气 新思想务实大国粮仓/title
/head
bodyimg src./img/news_logo.png height35px 新浪政务正文h1焦点访谈中国底气 新思想务实大国粮仓/h1hr2023年03月02日21:50央视网hr
/body
/html 运行后网页 CSS引入方式
1.行内样式:写在标签的style属性中(不推荐) 该方式只能使得h1一个标签有该属性复用性较低
2.内嵌样式写在style标签中(可以写在页面任何位置但通常约定写在head标签中) 3.外联样式:写在一个单独的.css文件中(需要通过 1ink标签在网页中引入) 代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈中国底气 新思想务实大国粮仓/title!-- 方式二内嵌方式 --styleh1{/* 颜色描述方式 *//* 第一种关键字 *//* color: red; *//* 第二种RGB表示 *//* color: rgb(255,0,0); *//* 第三种基于16进制 */color: #ff0000;}/style!-- 方式三外联样式 --!-- link relstylesheet hrefcss/news.css --
/head
bodyimg src./img/news_logo.png 新浪政务正文!-- 方式一行内样式 --!-- h1 stylecolor: red;焦点访谈中国底气 新思想务实大国粮仓/h1 --h1焦点访谈中国底气 新思想务实大国粮仓/h1hr2023年03月02日2150央视网hr
/body
/html
CSS文件
h1{color: red;
}
颜色表示的三种方式
1.关键字
如 red表示红色green表示绿色blue表示蓝色
2.rgb表示
红绿蓝三原色每项取值0-255。
3.十六进制表示法
#开头将数字转换成十六进制表示
每两个表示rgb的一个数
若有两个相同可以缩写
#000000缩写#000
CSS选择器
作用用来选取需要设置样式的元素(标签)
1.元素选择器 2.id选择器 为标签设置id: 3.类选择器 为标签设置类: 优先级
id选择器类选择器元素选择器
CSS属性
color:设置文本的颜色
font-size:字体大小 (注意:记得加px)
text-decoration:规定添加到文本的修饰none表示定义标准的文本 text-decoration: none;/* 设置没有下划线 */
text-align:规定元素中的文本的水平对齐方式左中右 text-align: right;/* 靠右对齐 */
text-indent:定义第一个行内容的缩进 text-indent: 35px;/* 设置首行缩进 */
4.pane标签
span是一个在开发网页时大量会用到的没有语义的布局标签
特点:一行可以显示多个(组合行内元素)宽度和高度默认由内容撑开
5.超链接
标签: a href target...央视网/a
属性:
href:指定资源访问的ur1(路径
target:指定在何处打开资源链接
_self:默认值在当前页面打开
_blank:在空白页面打开
代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title焦点访谈中国底气 新思想务实大国粮仓/title!-- 方式二内嵌方式 --styleh1{color: #4D4F53;}#time{/* 颜色 */color: rgb(151,142,144);/* 字体大小 */font-size: 12px;}a{color: black;text-decoration: none;}/style
/head
bodyimg src./img/news_logo.png a hrefhttps://gov.sina.com.cn/ target_self新浪政务/a 正文!-- 方式一行内样式 --!-- h1 stylecolor: red;焦点访谈中国底气 新思想务实大国粮仓/h1 --h1焦点访谈中国底气 新思想务实大国粮仓/h1hrspan classcis idtime2023年03月02日2150/spanspana hrefhttps://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml target_blank央视网/a/spanhr
/body
/html
6.视频标签video
属性
src:规定视频的url
controls:显示播放控件
width:播放器的宽度
height:播放器的高度 !-- 视频 --video srcvideo/1.mp4 controls width950px/video
7.音频标签audio
属性
src:规定音频的url
controls:显示播放控件 !-- 音频 --audio srcaudio/1.mp3 controls/audio
8.段落标签p
P人勤春来早春耕农事忙。立春之后由南到北我国春耕春管工作陆续展开春天的田野处处生机盎然。/P
9.文本加粗标签b/strong
b单纯加粗
strong有强调的意思
盒子布局
盒子:页面中所有的元素(标签)都可以看做是一个 盒子由盒子将页面中的元素包含在一个矩形区域内通过盒子的视角更方便的进行页面布局
盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin) 10.div标签
特点
一行只显示一个(独占一行)
宽度默认是父元素的宽度高度默认由内容撑开
可以设置宽高(width、height) 代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title盒子模型/titlestylediv {width: 200px;height: 200px;box-sizing: border-box; /* 指定width height为盒子的高宽 */background-color: aquamarine; /* 背景色 */padding: 20px; /* 内边距, 上 右 下 左 */border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */margin: 30px; /* 外边距, 上 右 下 左 */}/style
/headbodydivA A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A /div/body
/html
11.表格标签table
场景:在网页中以表格(行、列)形式整齐展示数据如:班级表。 th具有加粗效果 代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表格/titlestyletd {text-align: center; /* 单元格内容居中展示 */}/style
/head
bodytable border1px cellspacing0 width600pxtrth序号/thth品牌Logo/thth品牌名称/thth企业名称/th/trtrtd1/tdtd img srcimg/huawei.jpg width100px /tdtd华为/tdtd华为技术有限公司/td/trtrtd2/tdtd img srcimg/alibaba.jpg width100px /tdtd阿里/tdtd阿里巴巴集团控股有限公司/td/tr/table
/body
/html
运行效果 12.表单标签form
表单属性:
action:表单数据提交的url地址
method:表单提交方式
get:表单数据拼接在url后面?usernamejava,大小有限制
post:表单数据在请求体中携带大小没有限制
表单项
input:表单项通过type属性控制输入形式。 姓名: input typetext namename brbr select:定义下拉列表option定义列表项。
学历: select namedegreeoption value----------- 请选择 -----------/optionoption value1大专/optionoption value2本科/optionoption value3硕士/optionoption value4博士/option/select brbr
textarea:文本域 textarea namedescription cols30 rows10/textarea brbr cols 属性定义了文本输入框的列数即水平方向上的字符数。一个列相当于一个等宽的字符但实际上显示的字符宽度可能会根据字体而变化。这个属性的值是一个正整数表示文本输入框的列数。 rows 属性定义了文本输入框的行数即垂直方向上的文本行数。一个行相当于一行文本但实际上显示的行高可能会根据字体和浏览器而变化。这个属性的值也是一个正整数表示文本输入框的行数。
代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleHTML-表单项标签/title
/head
body!-- value: 表单项提交的值 --
form action methodpost姓名: input typetext namename brbr密码: input typepassword namepassword brbr 性别: input typeradio namegender value1 男labelinput typeradio namegender value2 女 /label brbr爱好: labelinput typecheckbox namehobby valuejava java /labellabelinput typecheckbox namehobby valuegame game /labellabelinput typecheckbox namehobby valuesing sing /label brbr图像: input typefile nameimage brbr生日: input typedate namebirthday brbr时间: input typetime nametime brbr日期时间: input typedatetime-local namedatetime brbr邮箱: input typeemail nameemail brbr年龄: input typenumber nameage brbr学历: select namedegreeoption value----------- 请选择 -----------/optionoption value1大专/optionoption value2本科/optionoption value3硕士/optionoption value4博士/option/select brbr描述: textarea namedescription cols30 rows10/textarea brbrinput typehidden nameid value1!-- 表单常见按钮 --input typebutton value按钮input typereset value重置 input typesubmit value提交 br
/form/body
/html
运行效果
