龙岩网站设计制作,网站权限配置,北京好用的h5建站,临海市住房和城乡建设规划局网站一 HTML入门
参考尚硅谷再总结复习 1.1 HTMLCSSJavaScript的作用 HTML 主要用于网页主体结构的搭建 CSS 主要用于页面元素美化 JavaScript 主要用于页面元素的动态处理 1.2 什么是HTML HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭…一 HTML入门
参考尚硅谷再总结复习 1.1 HTMLCSSJavaScript的作用 HTML 主要用于网页主体结构的搭建 CSS 主要用于页面元素美化 JavaScript 主要用于页面元素的动态处理 1.2 什么是HTML HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构在网页上展示内容 HTML5 是 HyperText Markup Language 5 的缩写HTML5 技术结合了 HTML4.01 的相关标准并革新符合现代网络发展要求在 2008 年正式发布。HTML5 由不同的技术构成其在互联网中得到了非常广泛的应用提供更多增强网络应用的标准机。与传统的技术相比HTML5 的语法特征更加明显并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容而且 HTML5中还结合了其他元素对原有的功能进行调整和修改进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。2014年10月28日W3C发布了HTML5的最终版。 1.3 什么是超文本 HTML文件本质上是文本文件而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中让网页有了非常丰富的呈现方式这就是超文本的含义——本身是文本但是呈现出来的最终效果超越了文本。 1.4 什么是标记语言 说HTML是一种『标记语言』是因为它不是像Java这样的『编程语言』因为它是由一系列『标签』组成的没有常量、变量、流程控制、异常处理、IO等等这些功能。HTML很简单每个标签都有它固定的含义和确定的页面显示效果。 双标签:标签是通过一组尖括号标签名的方式来定义的
pHTML is a very popular fore-end technology./p这个例子中使用了一个p标签来定义一个段落p叫开始标签/p叫结束标签。开始标签和结束标签一起构成了一个完整的标签。开始标签和结束标签之间的部分叫文本标签体也简称标签体。
单标签
input typetext nameusername /属性
a hrefhttp://www.xxx.comshow detail/ahref“网址” 就是属性href是属性名网址是属性值
1.5 HTML基础结构 1 文档声明 HTML文件中第一行的内容用来告诉浏览器当前HTML文档的基本信息其中最重要的就是当前HTML文档遵循的语法标准。这里我们只需要知道HTML有4和5这两个大的版本HTML4版本的文档类型声明是
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtdHTML5版本的文档类型声明是
!DOCTYPE html现在主流的技术选型都是使用HTML5之前的版本基本不用了。 2根标签 html标签是整个文档的根标签所有其他标签都必须放在html标签里面。 3头部元素 head标签用于定义文档的头部其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。 4主体元素 body标签定义网页的主体内容在浏览器窗口内显示的内容都定义到body标签内。 5注释 HTML注释的写法是
!-- 注释内容 --1.6 HTML的入门程序 第一步 准备一个纯文本文件,拓展名为html 第二步 使用记事本打开网页,在网页内开发代码 !DOCTYPE html
html langenheadmeta charsetUTF-8title我的第一个网页/title/headbodyhello html!!!/body
/html第三步 使用浏览器打开文件,查看显示的内容 1.7 HTML概念词汇解释 标签 代码中的一个 叫做一个标签,有些标签成对出现,称之为双标签,有些标签单独出现,称之为单标签 属性 一般在开始标签中,用于定义标签的一些特征 文本 双标签中间的文字,包含空格换行等结构 元素 经过浏览器解析后,每一个完整的标签(标签属性文本)可以称之为一个元素
1.8 HTML的语法规则
1 根标签有且只能有一个2 无论是双标签还是单标签都需要正确关闭3 标签可以嵌套但不能交叉嵌套4 注释语法为 ,注意不能嵌套5 属性必须有值值必须加引号,H5中属性名和值相同时可以省略属性值6 HTML中不严格区分字符串使用单双引号7 HTML标签不严格区分大小写,但是不能大小写混用8 HTML中不允许自定义标签名,强行自定义则无效
1.9在线帮助文档
http://www.w3school.com.cn
二 HTML常见标签
2.1 标题标签 标题标签一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等,有h1到h6六级标题 代码
bodyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6
/body效果
2.2 段落标签 段落标签一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果 代码
bodyp记者从工信部了解到近年来我国算力产业规模快速增长年增长率近30%算力规模排名全球第二。/pp工信部统计显示截至去年底我国算力总规模达到180百亿亿次浮点运算/秒存力总规模超过1000EB1万亿GB。国家枢纽节点间的网络单向时延降低到20毫秒以内算力核心产业规模达到1.8万亿元。中国信息通信研究院测算算力每投入1元将带动3至4元的GDP经济增长。/pp 近年来我国算力基础设施发展成效显著梯次优化的算力供给体系初步构建算力基础设施的综合能力显著提升。当前算力正朝智能敏捷、绿色低碳、安全可靠方向发展。/p
/body效果
2.3 换行标签 单纯实现换行的标签是br,如果想添加分隔线,可以使用hr标签 代码
body工信部统计显示截至去年底我国算力总规模达到180百亿亿次浮点运算/秒存力总规模超过1000EB1万亿GB。br国家枢纽节点间的网络单向时延降低到20毫秒以内算力核心产业规模达到1.8万亿元。hr中国信息通信研究院测算算力每投入1元将带动3至4元的GDP经济增长。
/body效果
2.4 列表标签 有序列表 分条列项展示数据的标签, 其每一项前面的符号带有顺序特征 列表标签 ol列表项标签 li代码
olliJAVA/lili前端/lili大数据/li
/ol效果 无序列表 分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征 列表标签 ul列表项标签 li代码
ulliJAVASE/liliJAVAEE/lili数据库/li
/ul效果 嵌套列表 列表和列表之前可以签到,实现某一项内容详细展示 代码
olliJAVAulliJAVASE/liliJAVAEE/lili数据库/li/ul/lili前端/lili大数据/li
/ol效果
2.5 超链接标签 点击后带有链接跳转的标签 ,也叫作a标签 href属性用于定义连接 href中可以使用绝对路径,以/开头,始终以一个固定路径作为基准路径作为出发点href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点href中也可以定义完整的URL target用于定义打开的方式 _blank 在新窗口中打开目标资源_self 在当前窗口中打开目标资源 代码
body!-- href属性用于定义连接href中可以使用绝对路径,以/开头,始终以一个路径作为基准路径作为出发点href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点href中也可以定义完整的URLtarget用于定义打开的方式_blank 在新窗口中打开目标资源_self 在当前窗口中打开目标资源--a href01html的基本结构.html target_blank相对路径本地资源连接/a bra href/day01-html/01html的基本结构.html target_self绝对路径本地资源连接/a bra hrefhttp://www.atguigu.com target_blank外部资源链接/a br
/body效果
2.6 多媒体标签 img(重点) 图片标签,用于在页面上引入图片 代码
!--
src用于定义图片的连接
title用于定义鼠标悬停时显示的文字
alt用于定义图片加载失败时显示的提示文字
--
img srcimg/logo.png title尚硅谷 alt尚硅谷logo /效果 audio 用于在页面上引入一段声音 代码 !-- src用于定义目标声音资源autoplay用于控制打开页面时是否自动播放controls用于控制是否展示控制面板loop用于控制是否进行循环播放-- audio srcimg/music.mp3 autoplayautoplay controlscontrols looploop /效果 video 用于在页面上引入一段视频 代码
body!-- src用于定义目标视频资源autoplay用于控制打开页面时是否自动播放controls用于控制是否展示控制面板loop用于控制是否进行循环播放-- video srcimg/movie.mp4 autoplayautoplay controlscontrols looploop width400px /
/body效果
2.7 表格标签(重点) 常规表格 table标签 代表表格thead标签 代表表头 可以省略不写tbody标签 代表表体 可以省略不写tfoot标签 代表表尾 可以省略不写tr标签 代表一行td标签 代表行内的一格th标签 自带加粗和居中效果的td代码 h3 styletext-align: center;员工技能竞赛评分表/h3table border1px stylewidth: 400px; margin: 0px auto;trth排名/thth姓名/thth分数/th/trtrtd1/tdtd张小明/tdtd100/td/trtrtd2/tdtd李小东/td/tdtd99/td/trtrtd3/tdtd王小虎/tdtd98/td/tr/table展示效果 单元格跨行 通过td的rowspan属性实现上下跨行代码 h3 styletext-align: center;员工技能竞赛评分表/h3table border1px stylewidth: 400px; margin: 0px auto;trth排名/thth姓名/thth分数/thth备注/th/trtrtd1/tdtd张小明/tdtd100/tdtd rowspan3前三名升职加薪/td/trtrtd2/tdtd李小东/td/tdtd99/td/trtrtd3/tdtd王小虎/tdtd98/td/tr/table效果 单元格跨行 通过td的colspan属性实现左右的跨列代码 h3 styletext-align: center;员工技能竞赛评分表/h3table border1px stylewidth: 400px; margin: 0px auto;trth排名/thth姓名/thth分数/thth备注/th/trtrtd1/tdtd张小明/tdtd100/tdtd rowspan6前三名升职加薪/td/trtrtd2/tdtd李小东/td/tdtd99/td/trtrtd3/tdtd王小虎/tdtd98/td/trtrtd总人数/tdtd colspan22000/td/trtrtd平均分/tdtd colspan290/td/trtrtd及格率/tdtd colspan280%/td/tr/table效果
2.8 表单标签(重点) 表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一 form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签 action, form标签的属性之一,用于定义信息提交的服务器的地址method, form标签的属性之一,用于定义信息的提交方式 get get方式, 数据会缀到url后,以?作为参数开始的标识,多个参数用隔开post post方式,数据会通过请求体发送,不会在缀到url后 input标签,主要的表单项标签,可以用于定义表单项 name, input标签的属性之一,用于定义提交的参数名type, input标签的属性之一,用于定义表单项类型 text 文本框password 密码框submit 提交按钮reset 重置按钮 代码 form actionhttp://www.atguigu.com methodget用户名 input typetext nameusername / br密nbsp;nbsp;nbsp;码 input typepassword namepassword / brinput typesubmit value登录 /input typereset value重置 //form效果
2.9 常见表单项标签(重点) 单行文本框 代码
个性签名input typetext namesignal/br/效果 密码框 代码
密码input typepassword namesecret/br/效果 单选框 代码
你的性别是
input typeradio namesex valuespring /男
input typeradio namesex valuesummer checkedchecked /女效果说明 name属性相同的radio为一组组内互斥当用户选择了一个radio并提交表单这个radio的name属性和value属性组成一个键值对发送给服务器设置checkedchecked属性设置默认被选中的radio如果属性名和属性值一样的话可以省略属性值只写checked即可 复选框 代码
你喜欢的球队是
input typecheckbox nameteam valueBrazil/巴西
input typecheckbox nameteam valueGerman checked/德国
input typecheckbox nameteam valueFrance/法国
input typecheckbox nameteam valueChina checkedchecked/中国
input typecheckbox nameteam valueItalian/意大利效果说明 设置checkedchecked属性设置默认被选中的checkbox 下拉框 代码
你喜欢的运动是
select nameinterestingoption valueswimming游泳/optionoption valuerunning跑步/optionoption valueshooting selectedselected射击/optionoption valueskating溜冰/option
/select效果说明 下拉列表用到了两种标签其中select标签用来定义下拉列表而option标签设置列表项。name属性在select标签中设置,value属性在option标签中设置。option标签的标签体是显示出来给用户看的提交到服务器的是value属性的值。通过在option标签中设置selectedselected属性实现默认选中的效果。 按钮 代码
button typebutton普通按钮/button或input typebutton value普通按钮/
button typereset重置按钮/button或input typereset value重置按钮/
button typesubmit提交按钮/button或input typesubmit value提交按钮/效果说明 普通按钮: 点击后无效果需要通过JavaScript绑定单击响应函数重置按钮: 点击后将表单内的所有表单项都恢复为默认值提交按钮: 点击后提交表单 隐藏域 代码
input typehidden nameuserId value2233/说明 通过表单隐藏域设置的表单项不会显示到页面上用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据例如用户id等等。 多行文本框 代码
自我介绍textarea namedesc/textarea效果说明 textarea没有value属性如果要设置默认值需要写在开始和结束标签之间。 文件标签 代码
头像:input typefile namefile/效果说明 不同浏览器显示的样式有微小差异
2.10 布局相关标签 div标签 俗称块,主要用于划分页面结构,做页面布局 span标签 俗称层,主要用于划分元素范围,配合CSS做页面元素样式的修饰 代码 div stylewidth: 500px; height: 400px;background-color: cadetblue;div stylewidth: 400px; height: 100px;background-color: beige;margin: 10px auto;span stylecolor: blueviolet;页面开头部分/span/div div stylewidth: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;span stylecolor: blueviolet;页面中间部分/span/div div stylewidth: 400px; height: 100px;background-color: burlywood;margin: 10px auto;span stylecolor: blueviolet;页面结尾部分/span/div /div展示效果
2.11 特殊字符 对于有特殊含义的字符,需要通过转移字符来表示 代码 lt;spangt; brlt;a hrefhttp://www.atguigu.comgt;尚nbsp;硅nbsp;谷lt;/agt; bramp;amp; 效果
三 CSS的使用 CSS 层叠样式表(英文全称(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制支持几乎所有的字体字号样式拥有对网页对象和模型样式编辑的能力 ,简单来说,美化页面 3.1 CSS引入方式 行内式,通过元素开始标签的style属性引入, 样式语法为 样式名:样式值; 样式名:样式值; 代码 input typebutton value按钮styledisplay: block;width: 60px; height: 40px; background-color: rgb(140, 235, 100); color: white;border: 3px solid green;font-size: 22px;font-family: 隶书;line-height: 30px;border-radius: 5px;/ 效果缺点 html代码和css样式代码交织在一起,增加阅读难度和维护成本css样式代码仅对当前元素有效,代码重复量高,复用度低 内嵌式 代码
headmeta charsetUTF-8style/* 通过选择器确定样式的作用范围 */input {display: block;width: 80px; height: 40px; background-color: rgb(140, 235, 100); color: white;border: 3px solid green;font-size: 22px;font-family: 隶书;line-height: 30px;border-radius: 5px;}/style
/head
bodyinput typebutton value按钮1/ input typebutton value按钮2/ input typebutton value按钮3/ input typebutton value按钮4/
/body效果说明 内嵌式样式需要在head标签中,通过一对style标签定义CSS样式CSS样式的作用范围控制要依赖选择器CSS的样式代码中注释的方式为 /* */内嵌式虽然对样式代码做了抽取,但是CSS代码仍然在html文件中内嵌样式仅仅能作用于当前文件,代码复用度还是不够,不利于网站风格统一 连接式/外部样式表 可以在项目单独创建css样式文件,专门用于存放CSS样式代码在head标签中,通过link标签引入外部CSS样式即可
headmeta charsetUTF-8link hrefcss/buttons.css relstylesheet typetext/css/
/head
bodyinput typebutton value按钮1/ input typebutton value按钮2/ input typebutton value按钮3/ input typebutton value按钮4/
/body说明 CSS样式代码从html文件中剥离,利于代码的维护CSS样式文件可以被多个不同的html引入,利于网站风格统一
3.2 CSS选择器 元素选择器 代码
headmeta charsetUTF-8styleinput {display: block;width: 80px; height: 40px; background-color: rgb(140, 235, 100); color: white;border: 3px solid green;font-size: 22px;font-family: 隶书;line-height: 30px;border-radius: 5px;}/style
/head
bodyinput typebutton value按钮1/ input typebutton value按钮2/ input typebutton value按钮3/ input typebutton value按钮4/ button按钮5/button
/body效果说明 根据标签名确定样式的作用范围语法为 元素名 {}样式只能作用到同名标签上,其他标签不可用相同的标签未必需要相同的样式,会造成样式的作用范围太大 id选择器 代码
headmeta charsetUTF-8style#btn1 {display: block;width: 80px; height: 40px; background-color: rgb(140, 235, 100); color: white;border: 3px solid green;font-size: 22px;font-family: 隶书;line-height: 30px;border-radius: 5px;}/style
/head
bodyinput idbtn1 typebutton value按钮1/ input idbtn2 typebutton value按钮2/ input idbtn3 typebutton value按钮3/ input idbtn4 typebutton value按钮4/ button idbtn5按钮5/button
/body效果说明 根据元素id属性的值确定样式的作用范围语法为 #id值 {}id属性的值在页面上具有唯一性,所有id选择器也只能影响一个元素的样式因为id属性值不够灵活,所以使用该选择器的情况较少 class选择器 代码
headmeta charsetUTF-8style.shapeClass {display: block;width: 80px; height: 40px; border-radius: 5px;}.colorClass{background-color: rgb(140, 235, 100); color: white;border: 3px solid green;}.fontClass {font-size: 22px;font-family: 隶书;line-height: 30px;}/style
/head
bodyinput class shapeClass colorClass fontClasstypebutton value按钮1/ input class shapeClass colorClass typebutton value按钮2/ input class colorClass fontClass typebutton value按钮3/ input class fontClass typebutton value按钮4/ button classshapeClass colorClass fontClass 按钮5/button
/body效果说明 根据元素class属性的值确定样式的作用范围语法为 .class值 {}class属性值可以有一个,也可以有多个,多个不同的标签也可以是使用相同的class值多个选择器的样式可以在同一个元素上进行叠加因为class选择器非常灵活,所以在CSS中,使用该选择器的情况较多
3.4 CSS浮动 CSS 的 Float浮动使元素脱离文档流按照指定的方向左或右发生移动直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动设计的初衷为了解决文字环绕图片问题浮动后一定不会将文字挡住这是设计初衷。文档流是是文档中可显示对象在排列时所占用的位置/空间而脱离文档流就是在页面中不占位置了。 浮动原理 当把框 1 向右浮动时它脱离文档流并且向右移动直到它的右边缘碰到包含框的右边缘当框 1 向左浮动时它脱离文档流并且向左移动直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中所以它不占据空间实际上覆盖住了框 2使框 2 从视图中消失。如果把所有三个框都向左移动那么框 1 向左浮动直到碰到包含框另外两个框向左浮动直到碰到前一个浮动框。如果包含框太窄无法容纳水平排列的三个浮动元素那么其它浮动块向下移动直到有足够的空间。如果浮动元素的高度不同那么当它们向下移动时可能被其它浮动元素“卡住” 浮动的样式名:float 通过代码感受浮动的效果 代码
headmeta charsetUTF-8style.outerDiv {width: 500px;height: 300px;border: 1px solid green;background-color: rgb(230, 224, 224);}.innerDiv{width: 100px;height: 100px;border: 1px solid blue;float: left;}.d1{background-color: greenyellow;/* float: right; */}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}/style
/head
bodydiv classouterDivdiv classinnerDiv d1框1/divdiv classinnerDiv d2框2/divdiv classinnerDiv d3框3/div/div
/body效果
3.5 CSS定位 position 属性指定了元素的定位类型。 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位不过绝对或固定元素会生成一个块级框而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 元素可以使用的顶部底部左侧和右侧属性定位。然而这些属性无法工作除非是先设定position属性。他们也有不同的工作方式这取决于定位方法。 静态定位 说明 不设置的时候的默认值就是static静态定位没有定位元素出现在该出现的位置块级元素垂直排列行内元素水平排列 代码
headmeta charsetUTF-8style.innerDiv{width: 100px;height: 100px;}.d1{background-color: rgb(166, 247, 46);position: static;}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}/style
/head
bodydiv classinnerDiv d1框1/divdiv classinnerDiv d2框2/divdiv classinnerDiv d3框3/div
/body效果 绝对定位 说明 absolute ,通过 top left right bottom 指定元素在页面上的固定位置定位后元素会让出原来位置,其他元素可以占用 代码
headmeta charsetUTF-8style.innerDiv{width: 100px;height: 100px;}.d1{background-color: rgb(166, 247, 46);position: absolute;left: 300px;top: 100px;}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}/style
/head
bodydiv classinnerDiv d1框1/divdiv classinnerDiv d2框2/divdiv classinnerDiv d3框3/div
/body效果 相对定位 说明 relative 相对于自己原来的位置进行地位定位后保留原来的站位,其他元素不会移动到该位置 代码
headmeta charsetUTF-8style.innerDiv{width: 100px;height: 100px;}.d1{background-color: rgb(166, 247, 46);position: relative;left: 30px;top: 30px;}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}/style
/head
bodydiv classinnerDiv d1框1/divdiv classinnerDiv d2框2/divdiv classinnerDiv d3框3/div
/body效果 固定定位 说明 fixed 失踪在浏览器窗口固定位置,不会随着页面的上下移动而移动元素定位后会让出原来的位置,其他元素可以占用 代码
headmeta charsetUTF-8style.innerDiv{width: 100px;height: 100px;}.d1{background-color: rgb(166, 247, 46);position: fixed;right: 30px;top: 30px;}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}/style
/head
bodydiv classinnerDiv d1框1/divdiv classinnerDiv d2框2/divdiv classinnerDiv d3框3/divbr*100tab
/body效果
3.6 CSS盒子模型 所有HTML元素可以看作盒子在CSS中box model这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子封装周围的HTML元素它包括边距margin边框border填充padding和实际内容content说明 Margin(外边距) - 清除边框外的区域外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域内边距是透明的。Content(内容) - 盒子的内容显示文本和图像。 代码 headmeta charsetUTF-8style.outerDiv {width: 800px;height: 300px;border: 1px solid green;background-color: rgb(230, 224, 224);margin: 0px auto;}.innerDiv{width: 100px;height: 100px;border: 1px solid blue;float: left;/* margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px; */margin: 10px 20px 30px 40px;}.d1{background-color: greenyellow;/* padding-top: 10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px; */padding: 10px 20px 30px 40px;}.d2{background-color: rgb(79, 230, 124);}.d3{background-color: rgb(26, 165, 208);}/style/headbodydiv classouterDivdiv classinnerDiv d1框1/divdiv classinnerDiv d2框2/divdiv classinnerDiv d3框3/div/div /body效果在浏览器上,通过F12工具查看盒子模型状态
