网站上线前的准备工作,成都设计专业的装修公司,无锡做网站价格,家庭室内装修设计公司1-前端基本知识-HTML 文章目录 1-前端基本知识-HTML总体概述什么是HTML#xff1f;超文本标记语言 HTML基础结构文档声明根标签头部元素主体元素注释 HTML概念词汇#xff1a;标签、属性、文本、元素HTML基本语法规则HTML常见标签标题标签段落标签换行标签列表标签超链接标签…1-前端基本知识-HTML 文章目录 1-前端基本知识-HTML总体概述什么是HTML超文本标记语言 HTML基础结构文档声明根标签头部元素主体元素注释 HTML概念词汇标签、属性、文本、元素HTML基本语法规则HTML常见标签标题标签段落标签换行标签列表标签超链接标签多媒体标签表格标签(重点)表单标签(重点)常见表单项标签(重点)布局相关标签特殊字符 总体概述
语言作用HTML主要用于网页主体结构的搭建页面元素和内容CSS主要用于页面的美化页面元素的外观、位置、颜色、大小JavaScript主要用于页面元素的动态处理交互效果
什么是HTML HTML是Hyper Text Markup Language的缩写意思是超文本标记语言 超文本
HTML文件本质上是文本文件普通的文本文件只能显示字符但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中让网页有了非常丰富的呈现方式超文本就是本身是文本但是呈现出来的最终效果超越了文本
标记语言
HTML是由一系列标签组成的每个标签都有它固定的含义和确定的页面显示效果不像编程语言一样HTML只有标签没有变量、常量、流程控制等
HTML基础结构
!DOCTYPE html
html langenheadmeta charsetUTF-8title我的第一个网页/title/headbodyhello html!!!/body
/html文档声明
HTML文件第一行内容 HTML文档声明有两类HTML4和HTML5现在用 HTML4的文档声明 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtdHTML5的文档声明 !DOCTYPE html根标签
整个文档的根标签其他所有标签都要放到里面
html langen.......
/html头部元素
用于定义文档的头部其他头部元素都放在head标签里
头部元素包括title标签、script标签、style标签、link标签、meta标签等
html langen.......
/html主体元素
body标签定义网页的主体内容在浏览器窗口内显示的内容都定义到body标签内
注释
!-- 注释内容 --HTML概念词汇标签、属性、文本、元素
概念解释标签代码中的一个 叫做一个标签有些标签成对出现称之为双标签一个叫开始标签一个叫结束标签有些标签单独出现称之为单标签属性一般在开始标签中用于定义标签的一些特征文本双标签中间的文字包含空格换行等结构元素经过浏览器解析后每一个完整的标签标签属性文本可以称之为一个元素
HTML基本语法规则 1 根标签有且只能有一个 2 无论是双标签还是单标签都需要正确关闭 3 标签可以嵌套但不能交叉嵌套 4 注释语法为 注意不能嵌套 5 属性必须有值值必须加引号H5中属性名和值相同时可以省略属性值 6 HTML中不严格区分字符串使用单双引号 7 HTML标签不严格区分大小写但是不能大小写混用 8 HTML中不允许自定义标签名强行自定义则无效
HTML常见标签
标题标签 一般用于在页面上定义一些标题性的内容如新闻标题文章标题等有h1到h6六级标题 bodyh1一级标题/h1h2二级标题/h2h3三级标题/h3h4四级标题/h4h5五级标题/h5h6六级标题/h6
/body段落标签 一般用于定义一些在页面上要显示的大段文字多个段落标签之间实现自动分段的效果 bodyp记者从工信部了解到近年来我国算力产业规模快速增长年增长率近30%算力规模排名全球第二。/pp工信部统计显示截至去年底我国算力总规模达到180百亿亿次浮点运算/秒存力总规模超过1000EB1万亿GB。国家枢纽节点间的网络单向时延降低到20毫秒以内算力核心产业规模达到1.8万亿元。中国信息通信研究院测算算力每投入1元将带动3至4元的GDP经济增长。/pp 近年来我国算力基础设施发展成效显著梯次优化的算力供给体系初步构建算力基础设施的综合能力显著提升。当前算力正朝智能敏捷、绿色低碳、安全可靠方向发展。/p
/body换行标签 单纯实现换行的标签是br如果想添加分隔线可以使用hr标签 body工信部统计显示截至去年底我国算力总规模达到180百亿亿次浮点运算/秒存力总规模超过1000EB1万亿GB。br国家枢纽节点间的网络单向时延降低到20毫秒以内算力核心产业规模达到1.8万亿元。hr中国信息通信研究院测算算力每投入1元将带动3至4元的GDP经济增长。
/body列表标签
有序列表 分条列项展示数据的标签其每一项前面的符号带有顺序特征
olliJAVA/lili前端/lili大数据/li
/ol无序列表分条列项展示数据的标签 其每一项前面的符号不带有顺序特征
ulliJAVASE/liliJAVAEE/lili数据库/li
/ul嵌套列表有序列表和无序列表嵌套
olliJAVAulliJAVASE/liliJAVAEE/lili数据库/li/ul/lili前端/lili大数据/li
/ol超链接标签 点击后带有链接跳转的标签 也叫作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多媒体标签 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表格标签(重点)
常规表格
table标签代表表格thead标签代表表头可以省略不写tbody标签代表表体可以省略不写tfoot标签代表表尾可以省略不写tr标签代表一行td标签代表行内的一格th标签自带加粗和居中效果的td
h3 styletext-align: center;员工技能竞赛评分表/h3
table 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;员工技能竞赛评分表/h3
table 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效果 表单标签(重点) 可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一 form actionhttp://www.atguigu.com methodget用户名 input typetext nameusername / br密nbsp;nbsp;nbsp;码 input typepassword namepassword / brinput typesubmit value登录 /input typereset value重置 //formform标签表单标签其内部用于定义可以让用户输入信息的表单项标签
action属性之一用于定义信息提交的服务器的地址method 属性之一用于定义信息的提交方式 get方式 数据会缀到url后以?作为参数开始的标识多个参数用隔开post方式数据会通过请求体发送不会在缀到url后
input标签主要的表单项标签可以用于定义表单项
name属性之一用于定义提交的参数名type属性之一用于定义表单项类型 text文本框password密码框submit提交按钮reset重置按钮
常见表单项标签(重点)
单行文本框
个性签名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/textareatextarea没有value属性如果要设置默认值需要写在开始和结束标签之间。
文件标签
头像:input typefile namefile/不同浏览器显示的样式有微小差异
布局相关标签
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特殊字符
对于有特殊含义的字符需要通过转移字符来表示 该类字符对大小写敏感 有数学符号、希腊字母、其他等字符 lt;spangt; brlt;a hrefhttp://www.atguigu.comgt;尚nbsp;硅nbsp;谷lt;/agt; bramp;amp;
