西安火车站网站建设,江苏省工程建设标准网站,网页设计与制作实用教程(第3版),淮安软件园哪家做网站简介
CSS用于美化内容
HTML用于摆放内容
可以理解为HTML是基础#xff0c;CSS是工具
HTML定义
HTML 超文本标记语言——HyperText Markup Language
超文本——链接
标记——标签#xff0c;即带尖括号的文本
标签语法
双标签
开始标签#xff1a; xxx 即尖…简介
CSS用于美化内容
HTML用于摆放内容
可以理解为HTML是基础CSS是工具
HTML定义
HTML 超文本标记语言——HyperText Markup Language
超文本——链接
标记——标签即带尖括号的文本
标签语法
双标签
开始标签 xxx 即尖括号标签文字结束标签/xxx 即尖括号中‘/’标签文字 开始标签和结束标签中文字需要相同 标签成对出现 单标签
只有开始标签没有结束标签
例如br、hr
标签关系
标签的书写位置和标签的关系相关
父子关系嵌套兄弟关系并列
体现在代码格式上
父子关系子级标签换行且缩进Tab键兄弟关系兄弟标签换行要对齐
注释
使用!--...--在文档中插入注释注释不会在文档中显示
VS Code中使用Ctrl/即可快速添加注释
基本骨架
html整个网页的所有内容都在其中书写
/htmlhtmlhead网页头部/headbody网页主体内容/body
/htmlhtmlheadtitle网页标题/title/head/html上述看到的CSDN - 专业开发者社区就是网页标题
如果使用VS Code进行html开发的话使用!Enter/Tab即可快速生成如下基本骨架 标签分类
标题标签
使用h1-h6(双标签)即可在页面中添加标题
htmlbodyh1章节标题/h1h2次标题/h2/body
/html显示特点
文字加粗字号逐渐减小独占一行换行
一般用于新闻标题、文章标题、网页区域名称等 h1在一个网页中只能使用一次用来放新闻标题或者网页LOGO h2-h6没有使用次数的限制 段落标签
p(双标签)用于将文章分段
显示特点
独占一行段落之间存在间隙
换行和水平线标签
换行br(单标签)
水平线hr(单标签)
文本格式化标签
为文本添加特殊格式以突出重点。常见的文本格式加粗、倾斜、下划线、删除线等
标签名效果strong加粗b加粗em倾斜i倾斜ins下划线u下划线del删除线s删除线
strong、em、ins、del标签自带强调含义
图像标签
作用在网页中插入图片
img src图片的 URL
src用于指定图像的位置和名称是img的必须属性
URL可以是服务器本地路径也可以是其他服务器的资源路径 相对路径从当前文件位置出发查找目标文件 文件夹名字/ 表示进入某个文件夹里面 ./ 表示当前文件所在文件夹 ../ 表示当前文件的上一级文件夹 绝对路径从盘符出发查找目标文件
img标签还有以下一些属性
属性作用说明alt替换文本图片无法显示的时候显示的文字title提示文本鼠标悬停在图片上面的时候显示的文字width图片宽度值为数字没有单位height图片高度值为数字没有单位
示例img src ./cat.jpg alt 替换文本 title 提示文本 属性名“属性值” 属性写在尖括号里面标签名后面标签名和属性之间用空格隔开不区分先后顺序 音频标签
audio src音频的 URL/audio
常见属性
属性作用特殊说明src(必须属性)音频URL支持格式MP3、Ogg、Wavcontrols显示音频控制面板loop循环播放autoplay自动播放浏览器一般禁用自动播放
视频标签
video src视频的 URL/video
常见属性
属性作用特殊说明src(必须属性)音频URL支持格式MP4、Ogg、WebMcontrols显示音频控制面板loop循环播放muted静音播放autoplay自动播放浏览器支持在静音状态自动播放
超链接标签
作用点击跳转到其他页面。
示例a hrefhttps://www.baidu.com跳转到百度/a href是跳转地址是超链接的必须属性 超链接默认在当前窗口跳转页面添加 target“_blank” 实现新窗口打开页面。
列表
无序列表
作用布局排列整齐的不需要规定顺序的区域。
标签ul 嵌套 liul 是无序列表li 是列表条目。
ulli第一项/lili第二项/lili第三项/li ……
/ulul 标签里面只能包裹 li 标签 li 标签里面可以包裹任何内容 有序列表
作用布局排列整齐的需要规定顺序的区域。
标签ol 嵌套 liol 是有序列表li 是列表条目
olli第一项/lili第二项/lili第三项/li ……
/olol 标签里面只能包裹 li 标签 li 标签里面可以包裹任何内容 定义列表
标签dl 嵌套 dt 和 dd
dl 是定义列表dt 是定义列表的标题dd 是定义列表的描述 / 详情。
dldt列表标题/dtdd列表描述 / 详情/dd ……
/dldl 里面只能包含dt 和 dd dt 和 dd 里面可以包含任何内容 表格
网页中的表格与 Excel 表格类似用来展示数据。
标签table 嵌套 trtr 嵌套 td / th。
标签名说明table表格tr行th表头单元格td内容单元格
示例 tabletrth姓名/thth语文/thth数学/thth总分/th/trtrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/trtrtd总结/tdtd全市第一/tdtd全市第一/tdtd全市第一/td/tr/table网页中表格默认没有边框线加上border1属性即可为表格添加边框线 用表格结构标签把内容划分区域让表格结构更清晰语义更清晰。
标签名说明特殊说明thead表格头部表格头部内容tbody表格主体主要内容区域tfoot表格底部汇总信息区域
修改后的语句如下 table border1theadtrth姓名/thth语文/thth数学/thth总分/th/tr/theadtbodytrtd张三/tdtd99/tdtd100/tdtd199/td/trtrtd李四/tdtd98/tdtd100/tdtd198/td/tr/tbodytfoottrtd总结/tdtd全市第一/tdtd全市第一/tdtd全市第一/td/tr/tfoot/table但实际效果并无区别因此表结构标签也可省略
合并单元格
合并单元格的步骤 明确合并的目标 保留最左最上的单元格添加属性取值是数字表示需要合并的单元格数量 跨行合并保留最上单元格添加属性 rowspan 跨列合并保留最左单元格添加属性 colspan 删除其他单元格
示例 table border1trth姓名/thth语文/thth数学/thth总分/th/trtrtd张三/tdtd99/tdtd rowspan2100/tdtd199/td/trtrtd李四/tdtd98/tdtd198/td/trtrtd总结/tdtd colspan3全市第一/td/tr/table表单
作用收集用户信息。
使用场景
登录页面注册页面搜索区域
input
input (单标签)标签 type 属性值不同则功能不同。
input type...
type属性值说明text文本框用于输入单行文本password密码框radio单选框checkbox多选框file上传文件
占位文本placeholder属性文本框和密码框都可以使用
input type... placeholder提示信息 radio
常用属性
属性名作用特殊说明name控件名称控件分组同组只能选中一个(单选功能)checked默认选中属性名和属性值相同简写为一个单词
示例
input typeradio namegender checked 男
input typeradio namegender 女file
默认情况下文件上传表单控件只能上传一个文件添加multiple属性可以实现文件多选功能
示例
input typefile multiplecheckbox
复选框默认选中同样使用checked属性
input typecheckbox checked下拉菜单
标签select 嵌套 optionselect 是下拉菜单整体option是下拉菜单的每一项。
示例代码 selectoption北京/optionoption上海/optionoption广州/optionoption深圳/optionoption selected武汉/option/select默认显示第一项selected属性实现默认选中功能
文本域
多行输入文本的表单控件
标签textarea双标签。
textarea默认提示文字/textarea实际开发中用CSS设置文本域的尺寸以及禁用右下角的拖拽功能
label
label标签双标签网页中用作某个标签的说明文本
可以用label标签绑定文字和表单控件的关系增大表单控件的点击范围。 label 标签只包裹内容不包裹表单控件 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同 input typeradio idman
label forman男/label使用 label 标签包裹文字和表单控件不需要属性 labelinput typeradio 女/label支持 label 标签增大点击范围的表单控件文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等 button
按钮
button typexxx按钮/buttontype属性值
type属性值说明submit提交按钮点击后可以提交数据到后台(默认功能)reset重置按钮点击后将表单控件恢复默认button普通按钮默认没有功能一般配合JavaScript使用 按钮需配合 form 标签表单区域才能实现对应的功能。 示例 forminput typeradio checked namegender 男input typeradio namegender 女button typereset重置/button/form语义化
无语义的布局标签
div独占一行span不换行 可以理解为div自带结束换行span没有结束换行 有语义的布局标签
标签名语义header网页头部nav网页导航footer网页底部aside网页侧边栏section网页区块article网页文章
字符实体
作用在网页中显示预留字符。
显示结果描述实体名称空格nbsp小于号lt;大于号gt;
