深圳哪家制作网站好,石家庄明确新冠最新研判,扬中黄子来,电子商务公司名称起名Web —— css基础 1. HTML2. 基本HTML结构3. HTML常用标签3.1 文本相关标签3.2 HTML图像标签3.3 HTML超链接标签3.4 HTML表#xff0c;单3.4.1 HTML表格3.4.2 HTML表单#xff0c;输入框#xff08;多选框#xff0c;单选框#xff09;下拉框 3.5 HTML分区标签3.5.1 div标… Web —— css基础 1. HTML2. 基本HTML结构3. HTML常用标签3.1 文本相关标签3.2 HTML图像标签3.3 HTML超链接标签3.4 HTML表单3.4.1 HTML表格3.4.2 HTML表单输入框多选框单选框下拉框 3.5 HTML分区标签3.5.1 div标签和span标签3.5.2 articleheadersectionfooteraside 1. HTML html超文本标记语言HyperText Markup Language一种用于创建网页的标准标记语言 特性使用标签即尖括号内的关键字来描述文本、图像、链接等元素在页面上的呈现方式和位置 外部文件图像、视频、音乐单独保存的没有放在HTML 文件的只是引用的一类文件等 网页的三个部分 文本内容text content在页面上让访问者了解页面内容的纯文字 对其他文件的引用references to other files我们使用这些引用来加载图像、音频、视频文件以及样式表控制页面的显示效果和JavaScript文件为页面添加行为 标记markup对文本内容进行描述并确保引用正确地工作 HTML 页面易创性网页可以保存为纯文本格式网页的基础每个网页都包含 DOCTYPE、html、head 和body 元素 开始标签如 head用于标记元素的开始 结束标签如 /head用于标记元素的结束 标签的组成元素element、属性attribute和值value 文件命名规则文件名全部使用小写字母用短横线分隔单词用 .html 作为扩展buckminster-fuller.html且文件夹的名称也应全部用小写字母 2. 基本HTML结构 HTML5 页面开头两个部分head 和 body 分级标题HTML 提供了六级标题用于创建页面信息的层级关系h1、h2、h3、h4、h5 、h6 外部文件图像、视频、音乐单独保存的没有放在HTML 文件的只是引用的一类文件等 页面基础 !DOCTYPE htmlDOCTYPE不区分大小写声明页面为HTML5 文档一本书的序言 html langlanguage-code页面内容默认语言的代码 head开始网页文档的头部 meta charsetutf-8/文 档 的 字 符 编 码声明为 UTF-8 title页面的标题 body开始页面的主体 h2 是 h1 的子标题h3 是 h2 的子标题以此类推其他标题也是h1的子标题 副标题就应该使用段落或其他非标题元素 普通页面构成 16种基本颜色 aqua水绿black黑blue蓝fuchsia紫红gray灰green绿lime浅绿maroon褐#00FFFF#000000#0000FF#FF00FF#808080#008000#00FF00#800000navy深蓝olive橄榄purple紫red红silver银teal深青white白yellow黄#000080#808000#800080#FF0000#C0C0C0#008080#FFFFFF#FFFF00 table aligncenter border1 styletext-align:center;caption16种基本颜色/captiontrtdaqua水绿/tdtdblack黑/tdtdblue蓝/tdtdfuchsia紫红/tdtdgray灰/tdtdgreen绿/tdtdlime浅绿/tdtdmaroon褐/td/trtrtd stylebackground-color: #00FFFF;#00FFFF/tdtd stylebackground-color:#000000;#000000/tdtd stylebackground-color:#0000FF;#0000FF/tdtd stylebackground-color:#FF00FF;#FF00FF/tdtd stylebackground-color:#808080;#808080/tdtd stylebackground-color: #008000;#008000/tdtd stylebackground-color:#00FF00;#00FF00/tdtd stylebackground-color:#800000;#800000/td/trtrtdnavy深蓝/tdtdolive橄榄/tdtdpurple紫/tdtdred红/tdtdsilver银/tdtdteal深青/tdtdwhite白/tdtdyellow黄/td/trtrtd stylebackground-color: #000080;#000080/tdtd stylebackground-color: #808000;#808000/tdtd stylebackground-color: #800080;#800080/tdtd stylebackground-color: #FF0000;#FF0000/tdtd stylebackground-color: #C0C0C0;#C0C0C0/tdtd stylebackground-color: #008080;#008080/tdtd stylebackground-color: #FFFFFF;#FFFFFF/tdtd stylebackground-color: #FFFF00;#FFFF00/td/tr/table3. HTML常用标签
3.1 文本相关标签 HTML 标题 ▶ ➤ HTML 标题Heading由h1 ~ h6 定义共6级标题定义页面中的标题和副标题独占一行自带行间距字体加粗 HTML 段落 ▶ ➤ HTML 段落由标签 p段落/p定义段落不加粗p标签可以包含任何文字、图片、链接或其他HTML元素 水平分割线 ▶ ➤ HTML中专门用于创建水平分割线的标记hr属于自闭和标签 属性 align指定分割线的对齐方式值可以为 left、center 或 right默认为 center color指定分割线的颜色值可以为颜色名或十六进制颜色代码 size指定分割线的高度粗细取值可以是正整数或百分比值 width指定分割线的长度值可以是正整数或百分比值 加粗 ▶ ➤ b加粗/b标签是一种比较旧的标签主要用于表示粗体文本HTML5规范更推荐使用更语义化的标签strong加粗/strong来表示强调的重要文本而不仅仅是简单的粗体效果 斜体 ▶ ➤ i斜体/i旧标签用来包裹需要以斜体显示的文本内容表示强调的文本HTML5规范em强调的文本/em 下划线 ▶ ➤ u下划线/u旧标签HTML5规范不再推荐使用标签来表示下划线因为下划线通常与链接相关联使用CSS样式来实现下划线效果styletext-decoration: underline; 删除线 ▶ ➤ s删除线/s旧标签HTML5规范推荐使用更语义化的标签来表示被删除的文本del删除的文本/del 无序列表unordered list ▶ ➤ ul标签用于创建无序列表其中包含项目每个项目使用li标签来表示 ul typecircleli项目1/lili项目2/lili项目3/li
/ul属性 type指定无序列表的符号类型 “disc”默认实心圆点符号 “circle”空心圆圈符号 “square”方块符号 start用于指定无序列表的起始值默认为1 compact用于指定是否紧凑显示无序列表如果设置为compact则列表项之间的间距会减小 有序列表 order list ▶ ➤ ol标签用于创建有序列表其中包含项目每个项目使用li标签来表示 ol typeAli项目1/lili项目2/lili项目3/li/ol属性 type指定有序列表的编号类型 “1”默认使用数字进行编号 “A”使用大写字母进行编号 “a”使用小写字母进行编号 “I”使用大写罗马数字进行编号 “i”使用小写罗马数字进行编号 reversed用于指定是否以逆序方式进行编号 start用于指定有序列表的起始值默认为1 compact用于指定是否紧凑显示有序列表 练习代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文本相关/title
/headbody!-- 标题 --p标题独占一行自带间距加粗/ph1标题1br标题内换行/h1h2 alignright标题2/h2h3标题3/h3h4标题4/h4h5标题5/h5h6标题6/h6!-- 水平分割线 --hr!-- 段落不加粗 --p段落/pp段落/pb加粗/bi斜体/iu下划线/us删除线/shr!-- 无序列表unordered --ul!-- 列表list --li列表/lili列表/lili列表/li/ul!-- 有序列表 order list --olli列表/lili列表/lili列表/li/ol
/body
/html李白简历
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title简历练习/title
/headbodyh1 aligncenter个人简历/h1hrh2基本信息/h2p姓名b李白/b/pp性别i男/i/pp爱好s摄影/s/ph2个人经历/h2ulli乡试/lili府试/lili殿试/li/ulh2获得荣誉/h2olli诗仙/lili谪仙人/li/ol
/body
/html3.2 HTML图像标签 html图片img标签 ▶ ➤ HTML的img标签用于在网页中显示图片空标签只包含属性并且没有闭合标签 属性 src图片文件的URL地址 alt当图片无法显示时替代的文本描述 title鼠标悬停在图片上时显示的文本 width图片的宽度可以使用像素或百分比来指定 height图片的高度可以使用像素或百分比来指定 align控制图片在文本中的对齐方式属性值可以是left、right、top、middle、bottom等 border设置图片边框的宽度属性值可以是整数表示像素宽度 usemap定义与图片关联的客户端图像映射image map !-- src资源路径alt图像不能显示时的问题说明title鼠标悬停时显示的文本width/height宽高赋值方式1.像素2.百分比--!-- 相对路径 --img src../html/background3.jpg alt背景 width50% title水墨!-- 绝对路径 盗链可能找不到图片 --img srchttps://ts1.cn.mm.bing.net/th/id/R-C.774b9223b5a3526c61691fcc5ecb3145?riki7Rvf49CF7Zc4wriuhttp%3a%2f%2fseopic.699pic.com%2fphoto%2f50041%2f7432.jpg_wh1200.jpgehk969PSODhgWgR359dXTJbOB4maXRx3XZ536jGL%2fUyUy0%3drislpidImgRawr0alt背景 width750 height378html图像地图map标签 ▶ ➤ HTML的map标签用于定义客户端图像映射Client-side Image Map 属性 name定义客户端图像映射的名称 id定义元素的唯一标识符 area用于定义具体的图像区域必须嵌套在map标签中 shape定义区域的形状支持rect矩形、circle圆形和poly多边形三种类型 coords定义区域的坐标格式取决于所选的形状类型 href定义区域被点击后要跳转到的URL地址 target定义链接打开的目标窗口常用的值包括_blank新窗口打开和_self当前窗口打开等 alt当鼠标悬停在区域上时显示的文本描述 !-- map图像地图 --img src../base/logo.png usemap#Mapmap nameMaparea shaperect coords0,0,82,126 href# altNortharea shapecircle coords90,58,3 href# altCenterarea shapepoly coords124,58,146,122,171,122,187,85,204,122,229,122,251,58,225,58,214,20,202,58 href#altSouth/map!-- 矩形(左上角顶点坐标为(x1,y1)右下角顶点坐标为(x2,y2)) --area shaperect coordsx1,y1,x2,y2 hrefurl!-- 圆形(圆心坐标为(X1,y1)半径为r) --area shapecircle coordsx1,y1,r hrefurl!-- 多边形(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......) --area shapepoly coordsx1,y1,x2,y2 ...... hrefurl3.3 HTML超链接标签 超链接a标签 ▶ ➤ HTML使用标签 a/a 来设置超文本链接超链接可以是一个字一个词或者一组词也可以是一幅图像 属性 href指定链接的URL地址可以是绝对路径包含完整的协议和域名或相对路径相对于当前页面的路径 target指定链接在何处打开的目标窗口或框架_blank在新窗口打开、_self在当前窗口打开如果未指定target属性默认会在当前窗口中打开链接 title当鼠标悬停在链接上时显示的文本 download链接被点击时是否下载链接的目标资源可以指定下载的文件名 rel指定链接与当前页面之间的关系或链接类型常见的取值包括nofollow告诉搜索引擎不要追踪该链接、noopener防止新打开的窗口引用当前窗口等 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title超链接/title
/headbody!-- 超链接 --!-- href资源路径target_blank在新窗口中访问不加则在该窗口中访问--a idtop hrefhttp:baidu.com百度/aa href../html/heart.html网页超链接/aa href../html/background3.jpg图片超链接img src../html/background3.jpg alt图片标签 width400 height200
/aimg src../html/Star.jpg alt width400 height200img src../html/background3.jpg alt width400 height200img src../html/title.png alt width400 height200img src../html/Star.jpg alt width400 height200a href#top超链接跳回顶部id标签/a
/body
/html3.4 HTML表单
3.4.1 HTML表格 表格table ▶ ➤ HTML 表格由 table 标签来定义行由 tr 标签定义单元格由 td 标签定义标题行由 th标签定义 trtable row 表格的一行 tdtable data 表格的数据单元格 thtable header表格的表头单元格 table标签属性 border指定表格的边框宽度一个非负整数值来表示像素宽度 cellpadding指定单元格内容与单元格边框之间的内边距大小一个非负整数值来表示像素宽度内边距 cellspacing指定单元格之间的间距大小 width指定表格的宽度非负的像素数值/百分比width“500” 表格宽度为500像素width“80%” 表格宽度为父元素宽度的80% align指定表格在父元素中的水平对齐方式left左对齐、center居中对齐、right右对齐 bgcolor指定表格的背景颜色可以设置为一个颜色值或颜色名称 tr标签属性 align行中所有单元格的水平对齐方式left左对齐、center居中对齐、right右对齐 valign行中所有单元格的垂直对齐方式top顶对齐、middle居中对齐、bottom底对齐 bgcolor指定行的背景颜色 td标签属性 colspan指定单元格横跨的列数 rowspan指定单元格横跨的行数 headers指定单元格所属的表头单元格 scope指定单元格所属的表头单元格的范围常用的取值包括row行表头和col列表头 !-- 表格 --p aligncenter表格1/ptable styleborder: 1px solid rgb(37, 151, 43); border1 aligncentertrtd colspan2 aligncenter1-1/tdtd1-3/td/trtrtd rowspan22-1/tdtd2-2/tdtd2-3/td/trtrtd colspan33-2/td/tr/table!-- 表格2 --table border1 aligncenter!-- 添加表格标题 --caption购物车/captiontr!-- 表头 --th序号/thth商品/thth名称/th/trtr valigntop aligncentertd1/tdtd小米14/tdtd3999/td/trtrtd2/tdtd华为mate60/tdtd4999/td/trtrtd3/tdtdvivo x/tdtd4500/td/trtrtd4/tdtdoppo/tdtd1900/td/tr/table3.4.2 HTML表单输入框多选框单选框下拉框 form表单 ▶ ➤ HTML的form标签用于创建一个表单是用户与网页交互的主要方式之一 属性 action指定表单数据提交的URL地址 method指定表单数据提交的HTTP方法 target指定表单提交后的响应目标_self、_blank、_parent和_top等 enctype指定表单数据的编码类型application/x-www-form-urlencoded默认值普通的表单数据multipart/form-data包含文件上传的表单数据 autocomplete指定浏览器是否启用表单字段的自动完成功能取值有on和off form action/submit-form methodpost target_self enctypemultipart/form-data autocompleteon!-- 表单内容 --
/forminput输入框 ▶ ➤ HTML的input标签用于创建一个输入字段它是表单中最常见的元素之一 属性 type指定输入字段的类型text文本输入框、password密码输入框、checkbox复选框、radio单选按钮、file文件上传、date日期时间选择器submit提交按钮 name指定输入字段的名称 value指定输入字段的默认值初始化输入字段的值 placeholder指定输入字段的占位文本在用户没有输入任何内容时显示并在用户开始输入时自动消失 required指定输入字段是否为必填项当设置为required时用户必须填写该字段才能提交表单 disabled指定输入字段是否为禁用状态当设置为disabled时用户无法编辑或选择该字段 readonly指定输入字段是否为只读状态 maxlength指定输入字段允许的最大字符数 pattern指定输入字段的验证模式使用正则表达式来定义自定义的验证规则 form action# aligncenterp输入框/p用户名input typetext nameusername placeholder请输入用户名 valuelycbr密码input typepassword namepassword placeholder请输入密码 maxlength16brinput typesubmit value注册p单选框/pinput typeradio namegender valuem男input typeradio namegender valuew女p多选框/p兴趣爱好input typecheckbox namehobby value1爱好1input typecheckbox namehobby value2爱好2input typecheckbox namehobby value3爱好3p日期选择器/p日期input typedate namedayp文件选择器/pinput typefile namepicp下拉选择器/p城市select namecityoption value北京北京/optionoption value上海上海/optionoption value广州广州/option/selectp自定义按钮/pinput typesubmithinput typeresetinput typebutton value按钮hrpbutton标签/pbutton typesubmit提交/buttonbutton typereset重置/buttonbutton typebutton按钮/button/form练习代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表单/title
/headbody!-- 表格 --p aligncenter表格1/ptable styleborder: 1px solid rgb(37, 151, 43); border1 aligncentertrtd colspan2 aligncenter1-1/tdtd1-3/td/trtrtd rowspan22-1/tdtd2-2/tdtd2-3/td/trtrtd colspan33-2/td/tr/table!-- 表格2 --table border1 aligncenter!-- 添加表格标题 --caption购物车/captiontr!-- 表头 --th序号/thth商品/thth名称/th/trtr valigntop aligncentertd1/tdtd小米14/tdtd3999/td/trtrtd2/tdtd华为mate60/tdtd4999/td/trtrtd3/tdtdvivo x/tdtd4500/td/trtrtd4/tdtdoppo/tdtd1900/td/tr/table!-- 表单 --!-- type输入框类型name输入框名称placeholder占位文本value自动填充内容默认值maxlength最大长度readonly只读模式没有值--form action# aligncenterp输入框/p用户名input typetext nameusername placeholder请输入用户名 valuelycbr密码input typepassword namepassword placeholder请输入密码 maxlength16brinput typesubmit value注册p单选框/pinput typeradio namegender valuem男input typeradio namegender valuew女p多选框/p兴趣爱好input typecheckbox namehobby value1爱好1input typecheckbox namehobby value2爱好2input typecheckbox namehobby value3爱好3p日期选择器/p日期input typedate namedayp文件选择器/pinput typefile namepicp下拉选择器/p城市select namecityoption value北京北京/optionoption value上海上海/optionoption value广州广州/option/selectp自定义按钮/pinput typesubmithinput typeresetinput typebutton value按钮hrpbutton标签/pbutton typesubmit提交/buttonbutton typereset重置/buttonbutton typebutton按钮/buttonhr size2 colorcyanh3练习/h3table border1 aligncentertrtd用户名/tdtdinput typetext nameusername placeholder用户名/td/trtrtd密码/tdtdinput typepassword namepassword placeholder密码 maxlength16/td/trtrtd性别/tdtdinput typeradio namegender valuem男input typeradio namegender valuew女/td/trtrtd爱好/tdtdinput typecheckbox namehobby valuepingpinginput typecheckbox namehobby valueballballinput typecheckbox namehobby valueplayplay/td/trtrtd地址/tdtdinput typetext placeholder地址/td/trtrtd生日/tdtdinput typedate namebirth/td/trtrtd头像/tdtdinput typefile namepic/td/trtrtd位置/tdtdselect namecityoption valuebeijing北京/optionoption valueshanghai上海/optionoption valueguangzhou广州/option/select/td/trtrtd colspan2提交/td/tr/table/form/body
/html3.5 HTML分区标签
3.5.1 div标签和span标签 div块级分区 ▶ 结构化布局 ➤ HTML的div标签是一个块级容器用于将一组元素组织在一起并为其应用样式或添加特定的行为 特点div标签没有特定的属性通常用作其他标签的父容器或包裹元素html最为常用的标签之一 div classcontainerdiv classheader头部/divdiv classcontent内容/divdiv classfooter底部/div
/divspan行内块 ▶ ➤HTML的span标签是一个行内元素用于在文本中标记或包裹特定的部分并为其应用样式或添加特定的行为 特点标签本身没有特定的语义含义主要用于结构化和样式化目的 p这是一段 span classhighlight需要高亮/span 的文本。/p3.5.2 articleheadersectionfooteraside article文章 ▶ ➤ HTML的article标签是一个块级元素用于表示独立的、完整的、可以独立于页面其余部分使用的内容 header文档头部 ▶ ➤ HTML的header标签是一个块级元素用于表示文档或区块的头部部分 section章节 ▶ ➤ HTML的section标签是一个块级元素用于将文档分割成独立的小节或区域 footer页脚 ▶ ➤ HTML的footer标签是一个块级元素用于表示文档或区域的页脚部分 aside侧边栏 ▶ ➤HTML的 标签是一个块级元素用于表示与页面主要内容相关但又可以独立存在的侧边栏、附属信息等 练习代码
!DOCTYPE html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title普通页面/titlestyle* {border-radius: 10px;}.page {margin: auto;width: 1000px;height: 900px;}header {margin-bottom: 10px;background-color: cadetblue;height: 60px;text-align: center;/* 行高 */line-height: 60px;font-size: 30px;}.content {background-color: cornflowerblue;width: 800px;height: 700px;font-size: 80px;/* 设置水平垂直居中 */display: flex;justify-content: center;align-items: center;margin: 10px;}.minor {background-color: darkkhaki;width: 150px;height: 700px;display: flex;margin: 10px;writing-mode: vertical-rl;text-orientation: mixed;display: flex;justify-content: center;align-items: center;font-size: 50px;}.major {display: flex;flex-direction: row;}footer {display: flex;justify-content: center;align-items: center;text-align: center;background-color: grey;margin-top: 20px;height: 60px;font-style: italic;}/style
/headbodyarticle classpageheader页眉页面导航栏/headersection classmajorp classcontent页面主要内容/paside classminor页面次要内容/aside/sectionfooter页脚页面声名/footer/article
/body/html
