公司网站建设的优势,购物网站主页模版,python做视频网站,做网站电信运营许可证一 前端简介构成语言说明结构HTML页面元素和内容表现CSS网页元素的外观和位置等页面样式#xff08;美化#xff09;行为JavaScript网页模型的定义和页面交互二 HTML1.简介HTML#xff08;Hyper Text Markup Language#xff09;#xff1a;超文本标记语言。网页结构整体美化行为JavaScript网页模型的定义和页面交互二 HTML1.简介HTMLHyper Text Markup Language超文本标记语言。网页结构整体html、头部head、标签title、主体bodyhtmlheadtitle网页标题/title/headbody网页主体内容/body
/html2.VSCode!Enter获得网页结构ctrls保存fnf5运行altb要先运行一次在游览器中运行ctrl/注释ctrld得到与选择值相同的代码altz自动换行3.基础3.1 标签标签结构标签分类1.父子关系嵌套关系2.兄弟关系并列关系3.2 标题标签h11级标题
/h1
...
h66级标题
/h61~6标题依次递减3.3 段落标签p段落内容
/p3.4 换行标签br3.5 水平线标签hr3.6 文本格式化标签一般突出重要语义两者显示效果相同主要后者突出重要语义3.7 媒体标签3.7.1 图片标签img src图片路径 alt属性名“属性值”alt属性title属性提示文本当鼠标悬停时才显示文本。还可用于其他标签。width,height属性宽度和高度如果只设置其中一个则自动等比例缩放。如果同时设置两个可能图片变形3.7.2 音频标签audio scr音频文件名 controls/audioaudio scr音频文件名 controls autoplay loop/audio目前支持格式mp3,wav,ogg多用mp33.7.3 视频标签video src视频文件名video src视频名 controls autoplay muted loop/video格式mp43.8 路径相对路径相对路径常用从当前文件开始找目标文件。相对路径分类1.同级目录文件在当前同一目录上有两种形式img src直接写文件名
img src./文件名2.下级目录目标文件在下级目录中img src文件夹名/目标文件3.上级目录先出当前文件夹再找目标文件img src../目标文件
!--上级目录下级目录--
img src../文件夹名/文件名绝对路径从盘符开始完整路径3.9 链接标签作用点击后可跳转页面a href链接点击的位置/aa hrefhttps://www.baidu.com点击跳转到百度/a如果跳转到本地文件a href相对路径点击跳转/a空连接可后续添加链接a href#空链接/atarget属性控制目标打开形式a href链接 target_blank/a3.10 案例1zoo!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1ZOO/h1hrh2Introduce/h2p12345678/ph2Cat/h2img srcimages/cat1.jpg altIts a cat! width150/body
/html3.11 案例2链接首页面命名为index.htmlindex.html!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1热词/h1hrh21.音频/h2p听音乐a href./one.html张艺兴-莲/a/ph22.视频/h2p看视频a href./two.html烟花/a/p
/body
/htmlone.html!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1张艺兴-莲/h1hraudio src../music/Lit.mp3controls/audio
/body
/htmltwo.html!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1烟花视频/h1hrvideo src../vidio/烟花.mp4 controls/video
/body
/html4.列表标签4.1 无序列表ul!--列表内容--li第一条内容/lili第二条内容/li
/ul注ul标签只允许包含li的标签。4.2 有序列表ol!--列表内容--li第一条内容/lili第二条内容/li
/ol注ol标签只允许包含li的标签。4.3 自定义列表dl!--列表内容--dt列表标题/dtdd第一条会自动缩进/dd
/dl注dl中只允许放dt和dd标签5.表格标签5.1 表格设置table!--用于包裹多个tr--tr!--表格整行,包裹多个td--td第一行第一列/tdtd第一行第二列/td/trtr!--表格整行,包裹多个td--td第二行第一列/tdtd第二行第二列/td/tr
/table表格属性border表格边框粗细width表格宽height表格高table border1 width10 height10/table5.2 表格标题和表头单元格标题caption表格大标题th表头单元格tablecaptionstrong表格大标题/strong/captiontrth表头单元格标题1会自动加粗/thth表头单元格标题2会自动加粗/th/tr
/table5.3 合并单元格左上原则上下合并保留最上的左右合并保留最左的。rowspan跨行合并colspan跨列合并属性要合并几个单元格就填数字几。td rowapan2标题/td6.表单标签6.1 input系列作用在网页中收集用户信息的表单。type属性值!--写什么就显示什么--
文本框input typetext
br
!--写的内容变成点点--
密码框input typepassword
br
单选框input typeradio
br
多选框input typecheckbox
br
上传文件input typefile6.2 文本框属性placeholder在输入框里浅色提示输入内容input typetext placeholder提示内容6.3 选框属性name属性对于单选框有分组功能相同name为一组。checked默认选中。(多选时通用)男女选择性别input typeradio namegender男 input typeradio namegender checked女6.4 文件属性multiple多个文件上传操作时可 ctrla 全选或 ctrl点击 选多个文件input typefile multiple6.5 按钮submit提交按钮点击后直接提交数据给后端。reset重置按钮点击后恢复表单默认值。button无功能等js添加自定义功能表单域作用多个标签绑定重置时会一起没有。form action/formform action用户名input typetextbr!--提交按钮--input typesubmit!--重置按钮--input typeresetinput typebutton value写按钮名字
/formbutton按钮属性同input按钮。button是双标签更加便于包裹其他内容。button typesubmit提交按钮
/button6.6 下拉菜单标签标签组成select标签下拉菜单的整体。option标签下拉菜单的每一项。属性selected下拉菜单的默认选中。selectoption选项1/optionoption选项2/optionoption选项3/optionoption selected选项4/option
/select6.7 文本域标签网页中可输入多行的表单控件标签名textarea属性cols调宽度rows调高度textarea cols10 rows10/textarea可通过拖拽改大小css中可避免一般在css中设置宽高。6.8 label标签用于绑定内容与表单标签的关系。使用方法11.用label标签把内容包裹起来2.在表单标签上添加id属性3.在label标签的for属性中设置对应的id属性。!--单选框和‘男’字关联点‘男’相当于点击单选框--
input typeradio namesex idnanlabel fornan男/label使用方法21.直接使用label把内容和表单标签一起包裹起来。labelinput typeradio namesex女/label6.9 语义化标签无语义的布局标签div标签一行只显示一个会自动换行。span标签一行可显示多个。div这是div标签
/divspan这是span标签/span有语义布局标签6.10 字符实体常见字符实体要打多个空格空nbsp;nbsp;nbsp;nbsp;nbsp;格7.案例1 学生信息表!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidth, initial-scale1.0titleDocument/title
/head
bodytable border1 width500 height300captionh2学生信息表/h2/captiontrth班级/thth姓名/thth学号/th/trtrtd rowspan22101/tdtdzyy/tdtd2112190127/td/trtrtdgtt/tdtd2112190239/td/trtrtd评语/tdtd colspan3都是美女/td/tr/table
/body
/html8.案例2 表单!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1LOVE/h1hr!-- 表单框架 --form action昵称input typetext placeholder请输入昵称brbr性别labelinput typeradio namesex checked男/labellabelinput typeradio namesex女/labelbrbr所在城市selectoption北京/optionoption上海/optionoption广州/optionoption selected杭州/option/selectbrbr学历labelinput typeradio namestudy checked本科/labellabelinput typeradio namestudy专科/labellabelinput typeradio namestudy博士/labellabelinput typeradio namestudy硕士/labelbrbr喜欢类型labelinput typecheckbox可爱/labellabelinput typecheckbox checked性感/labellabelinput typecheckbox御姐/labellabelinput typecheckbox辣妹/labellabelinput typecheckbox洛丽塔/labelbrbr个人介绍brtextarea name id cols30 rows10/textareabrbrh3承诺书/h3ulli认真/lili严肃/lili忠诚/li/ulbrlabelinput typecheckbox同意所有条款/labelbr!-- 两种创建按钮的方法 --input typesubmit value注册button typereset重置/button/form
/body
/html
