淄博专业网站设计,神马搜索seo优化排名,网络推广和竞价怎么做,网站上线流程分为目录 一、前端开发介绍
二、HTML入门
三、HTML基础标签
四、CSS样式修饰
五、HTML表格标签
六、HTML表单标签 一、前端开发介绍 web应用有BS和CS架构两种#xff0c;其中我们主要涉及的是BS架构。而BS架构里#xff0c;B#xff08;Browser浏览器#xff09;是客户端的…目录 一、前端开发介绍
二、HTML入门
三、HTML基础标签
四、CSS样式修饰
五、HTML表格标签
六、HTML表单标签 一、前端开发介绍 web应用有BS和CS架构两种其中我们主要涉及的是BS架构。而BS架构里BBrowser浏览器是客户端的角色它负责与用户交互给用户展示数据、收集用户输入的数据。 前端页面是在浏览器里渲染显示的而同一页面在不同浏览器里显示的效果是有差异的所以建议大家都使用chrome浏览器
前端开发有一套Web标准也称为网页标准由一系列的标准组成大部分由W3C World Wide Web Consortium万维网联盟负责制定。由三个组成部分 HTML负责展示内容、收集数据。但是不好看 CSS负责修饰HTML的样式。 JavaScript负责网页的行为交互效果
二、HTML入门
1.HTML: HyperText Markup Language超文本标记语言。 超文本超越了文本的限制比普通文本更强大。除了文字信息还可以定义图片、音频、视频等内容。 标记语言由标签构成的语言 HTML标签都是预定义好的。例如使用h1 标签展示标题使用img展示图片。 HTML代码直接在浏览器中运行HTML标签由浏览器解析。 2. HTML快速入门 第一步:创建一个名为HTML的文件夹 第二步创建一个文本文件然后修改文件名为hello.html,注意文件的后缀是.html 第三步选中文件鼠标右击选择使用记事本打开文件并且编写前端代码
htmlheadtitleHTML 快速入门/title/headbodyh1Hello HTML/h1/body
/html
第四步然后选中文件鼠标右击选择使用浏览器打开文件 结果是 Hello HTML
3. 开发工具VSCode Visual Studio Code简称 VS Code 是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持同时也其他编程语言例如C、Java、Python、PHP、Go等。VS Code 提供了非常强大的插件库大大提高了开发效率。 官网 https://code.visualstudio.com 右键点击Open with Live Server运行
三、HTML基础标签
1.文本类标签是html提供的用于展示文本内容的标签是html里非常常见的基础标签。 2. 路径的写法 无论是前端开发还是后端开发都会经常用到路径那么前端开发中路径是怎么写的呢同样有两种写法 绝对路径指完整路径 磁盘文件的绝对路径C:\img\a.jpg 或者 /Users/tom/abc.jpg。前端开发中不要使用这种路径 互联网网址绝对路径(url)http://www.baidu.com。注意url中开头的http或者https等不能省略必须写 相对路径指想要加载的目标资源和当前资源的相对位置。有两种写法 以./开头的路径表示从当前目录加载资源其中./可以省略。例如 ./hello.html表示从当前目录里加载hello.html页面文件 hello.html等价于./hello.html 以../开头的路径表示从上级目录里加载资源其中../不能省略。例如 ../welcome.html 表示从上组目录里加载welcome.html 3. 颜色的写法 4.尺寸的写法 !DOCTYPE html
html langen
headmeta charsetUTF-8title文体类标签/title
/head
bodyh1公司简介/h1hr colororange size2pxpb中关村黑马程序员训练营/b是由a hrefhttp://www.itcast.cn target_blank传智播客/a联合中关村软件园、CSDN 并委托传智播客进行教学实施的软件开发高端培训机构致力于服务各大软件企业解决当前软件开发技术飞速发展 而企业招不到优秀人才的困扰。br目前“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地 并被评为中关村软件园重点扶持人才企业。/pp黑马程序员的学员多为大学毕业后有理想、有梦想想从事IT行业而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员” 必须经历长达2个月的面试流程这些流程中不仅包括严格的技术测试、自学能力测试还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量并降低企业的用人风险。/pp中关村黑马程序员训练营不仅着重培养学员的基础理论知识更注重培养项目实施管理能力并密切关注技术革新 不断引入先进的技术研发更新技术课程确保学员进入企业后不仅能独立从事开发工作更能给企业带来新的技术体系和理念。/pp一直以来黑马程序员以技术视角关注IT产业发展以深度分享推进产业技术成长致力于弘扬技术创新倡导分享、 开放和协作努力打造高质量的IT人才服务平台。 /p
/body
/html
2. 媒体类标签 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title媒体标签/title
/head
bodyimg srcimg/1.jpg width500pxvideo srcvideo/1.mp4 controls width500px/videoaudio srcaudio/1.mp3 controls/audio
/body
/html
四、CSS样式修饰
1.CSS: Cascading Style Sheet层叠样式表用于控制页面的样式表现 div和span标签 有任何特殊的显示效果和特殊功能所以可以使用CSS添加几乎任何样式 divdiv里的内容没有任何样式但是宽度会独占一行
/div
spanspan里的内容同样没有任何样式但是宽度是由内容决定的。内容多大就占多大空间
/span
2. CSS基础语法 1.CSS的引入方式 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS引入方式/title!-- stylediv{color: blue;}/style --link relstylesheet href./css/demo.css
/head
body!-- ctrl / 是注释快捷键引入方式1行内样式用的少在html标签里直接加样式代码 stylecss样式属性:值; css样式属性:值;问题要给一个标签加样式就要修改这个标签如果要加的样式很多这个标签里的内容会很长如果多个标签要加相同的样式那么每个标签里都得写样式--!-- div stylecolor: red;黑马程序员昌平Java418期秦宇迪和雷宇迪/divdiv stylecolor: red;黑马程序员/div --!-- 引入方式2内部样式用的多在head标签里增加子标签style在style里写css样式书写语法是选择要修饰的标签 {css样式属性: 值;css样式属性: 值;}问题只能选择当前页面里的标签进行修饰。如果有多个页面都要加相同的样式每个页面里都得重复写一次--!-- div小红/divdiv小明/div --!-- 引入方式3外联样式用的更多创建单独的css文件xxx.css把样式代码写到css文件里在html里的head标签内使用link标签引入css文件即可--div小红15K/divdiv小明15K/div
/body
/html 2.CSS选择器 标签选择器根据标签名称选择要修饰的元素 id选择器根据标签的id属性值选择要修饰的元素 class选择器根据标签的class属性值选择要修饰的元素 特别注意的是如果一个标签被选设置同样的设置(比如都设置颜色颜色不同)既有标签的设置又有id的设置又有class的设置优先级 id class 标签
headstylediv{/*选中所有div标签设置div里内容显示成红色*/color: red;}#d1 {/*选中id为d1的标签设置内容颜色为蓝色*/color: blue;}.cls{/*选中class属性值为cls的标签设置内容颜色为绿色*/color: green;} /style
/head
bodydivhello/divdivcss/divdiv idd1hello/divspan classclshello/spanspan classclsworld/span
/body
3.CSS常用属性 1.常用样式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS常用样式/titlestylediv {color: red;font-size: 50px;font-family: 楷体;background-color: beige;/* 首行缩进。2em是2个中文字符的距离 */text-indent: 2em;/* 行高 */line-height: 100px;/* 当一行内容不满时水平就居中显示 */text-align: center;}a{/* 设置文字的样式。underline下划线overline上划线line-throgh删除线none无线条 */text-decoration: none;}/style
/head
bodydiv418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K/diva hrefhttp://www.baidu.com跳转到百度/a
/body
/html 2 页面布局与盒子模型 所谓“盒子模型” 是指CSS把页面中所有的元素标签都看做是一个盒子从而通过设置盒子的大小等样式进行页面布局。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title盒子模型/titlestyle#inner{width: 200px;height:200px;background-color: yellow;}#box{background-color: lightgreen;width: 200px;height: 200px;border: green 50px solid;padding: 50px;margin: 50px;}/style
/head
bodydiv idboxdiv idinner/div/div
/body
/html
五、HTML表格标签 1.场景在网页中以表格行、列形式整齐展示数据 2.表格标签 !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 src图片路径 width100px /tdtd某公司/tdtd某某有限公司/td/trtrtd2/tdtd img src图片路径 width100px /tdtd公司/tdtd某某团控股有限公司/td/tr/table/body
/html
六、HTML表单标签 表单是用于收集用户所输入的数据的组件 1.标签介绍 !--
01.表单标签form是一个容器里边用来放各种各样的表单项。脱离开表单项form标签本身没有任何作用属性name名称。可以不给名称action表单数据提交的路径。如果没有路径表示提交给当前页面自己method表单数据提交的方式。常用方式有get、post
--
form namemyform action methodget/form 2.get和post的区别重点 get方式 数据是在HTTP请求行里提交的会显示到地址栏 安全性相对较低 参数长度有限制 post方式 数据是在HTTP请求体里提交的不会显示到地址栏 安全性相对较高 参数长度理论上没有限制 3.input标签 4.select下拉框标签 5.tetxtarea文本域标签 如果需要让用户输入大段的文本内容的话可以使用textarea文本域标签它允许用户输入多行内容
form methodpost action!--文本框(text)密码框(password)name表单项的名称。如果这个表单项的数据要提交就必须有name属性value默认值--帐号input typetext nameusername value默认值 br密码input typepassword namepassword value123456br!--单选按钮(radio)复选框(checkbox)name表单项名称。如果这个表单项的数据要提交就必须有namename相同的radio属于同一组同组radio的特性是选择互斥name相同的checkbox属于同一组但是同组的目的仅仅是方便服务端接收数据而已value选项的值每个选项都要有值。选中哪个选项提交表单时就提交哪个选项的value值默认值哪个选项想要默认选中就在哪个选项上加属性 checkedchecked 或者简写checked--性别input typeradio namesex valuemale checked男input typeradio namesex valuefemale女 br爱好input typecheckbox namehobby valuesing checked唱input typecheckbox namehobby valuedance checked跳input typecheckbox namehobby valuerap checkedrapinput typecheckbox namehobby valueball篮球 br!--文件选择框(file)name如果这个表单项的数据要提交就必须有name注意默认情况下文件选择框提交的仅仅是文件名称而不是上传文件--文件input typefile namefile!--隐藏域不显示到页面上的表单项但是在提交表单时它的数据可以被提交只要有nametypehiddenname如果数据要提交就必须有namevalue隐藏域的值实际使用场景等学习到的时候再说--input typehidden namehide value隐藏域的值!--按钮普通按钮(button)没有任何功能的按钮所以将来可以使用JavaScript自定义任何功能提交按钮(submit)点击时会提交表单。按钮在哪个表单里就提交哪个表单重置按钮(reset)点击时会把表单里所有表单项数据恢复成默认值常用属性name可以不设置。value是按钮上的文字--input typebutton value普通按钮input typesubmit value提交按钮input typereset value重置按钮brbrhr!--下拉框select标签下拉框本身name如果下拉框的数据要提交就必须有name属性option标签下拉选项要放在select标签里边使用value选项的值。选中哪个选项就提交哪个选项的value值默认值如果没有任何设置默认选中第一个选项如果要手动设置默认值哪个选项想要默认选中就在哪个选项option上加属性 selectedselected或者简写 selected--地址select nameaddressoption valuetj天津市/optionoption valuebj selected北京市/optionoption valuesh上海市/option/select!--文本域textareaname如果数据要提交就必须有name属性--slogantextarea nameslogan rows5 cols10 maxlength5默认值/textarea
/form
七、文档阅读 这里只是教大家一个入门还有很多标签我们没有学习如果忘记和查找去一个官网 文档地址: w3school 在线教程
