网站如何做参考文献,西电信息化建设网站,永州高端网站建设,我对网站开发的项目反思目录 URL#xff08;统一资源定位系统#xff09;
HTML#xff08;超文本标记语言#xff09;
1#xff09;html标签
2#xff09;head标签
3#xff09;title标签
4#xff09;body标签 标签的分类
DTD文档声明 基础标签
1#xff09;H系列标签
2#xff09…目录 URL统一资源定位系统
HTML超文本标记语言
1html标签
2head标签
3title标签
4body标签 标签的分类
DTD文档声明 基础标签
1H系列标签
2P标签
3Hr标签
4img标签
5br标签 6a标签 7base标签 注释
路径问题
假链接
锚点
列表标签
1无序列表
2有序列表
3定义列表
表格标签
1table标签 2caption标签
3thead标签
5tfoot标签
表单标签
1input标签
2label标签 3非input标签
select标签
textarea标签
多媒体标签
1video标签
2audio标签 URL统一资源定位系统
格式http://127.0.0.1:80/index.html浏览器会自动添加:80
拆分http:// URL协议类型 127.0.0.1 服务器IP地址 :80 服务器的端口号 index.html 需要访问的资源名称
HTML超文本标记语言
利用HTML来告诉浏览器哪些是标题哪些是段落
1html标签
用来向浏览器说明这是一个网页其他所有标签都必须写在html标签里面
2head标签
用来给网站添加配置一般情况下head标签里的内容不会向用户呈现出来
3title标签
用于指定网站的标题title标签必须写在head标签的里面
4body标签
用于定义HTML文档中需要呈现给用户的内容
注一对html标签中只能有一对body标签 标签的分类
单标签只有开始标签
双标签有开始和结束标签
DTD文档声明
目前学习只讲解HTML5的DTD文档声明为!DOCTYPE html不区分大小写
注DTD文档声明必须写在HTML的第一行如下图
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1titleHTML作用-1332442/title/headbody猪猪侠/body
/html 基础标签
1H系列标签
作用用于给文本添加标题语义
格式h1xxxxxx/h1
注①H标签一共有6个超过6个则无效 ②被H标签包裹的内容会单独占一行 ③H1最大H6最小
2P标签
作用告诉浏览器哪些文字是一个段落
格式pxxxxxx/p
注被P标签包裹的内容会单独占一行
3Hr标签
作用在浏览器显示一条分割线
格式 hr/
注在浏览器中会单独占一行
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1titleH标签和P标签以及Hr标签/title
/head
body!-- h1我是标题1/h1 --h2我是标题2/h2h3我是标题3/h3h4我是标题4/h4h5我是标题5/h5h6我是标题6/h6hr/p我是一段文本/pp我是一段文本/p我是一段普通文本我是一段普通文本
/body
/html 4img标签
作用告诉浏览器需要显示图片
格式img srcxxxxxxscr用来确定图片名称
注img标签不会单独占一行
width宽度
height高度
title用于告诉浏览器当鼠标悬停在图片上时需要弹出的描述框中的内容
alt告诉浏览器当需要显示的图片找不到时显示什么内容
5br标签
作用用于换行
格式br
注多个br标签可连续使用但要注意br标签用于换行而并不是重启一个段落
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1titleimg标签/title
/head
bodyimg src./pic/pic1.jpgbr!-- 手动修改图片的长度和宽度会使图片比例改变 --img srcpic1.jpg width100 height30 br!-- 若想保持图片比例不变则可以只改长度或宽度 --img srcpic1.jpg height300 brimg srcpic1.jpg width160br img srcpic1.jpg height300 title图片很好看brimg srcpic11666781.jpg height300 alt对不起查看的图片不见了
/body
/html 6a标签
作用控制页面与页面之间的跳转
格式a href跳转的目标界面用户点击的内容/a
注①a标签有一个target属性其作用于如何跳转 _self在当前选项卡跳转即不创建新的界面 _blank创建新界面跳转 ②a标签还有title属性用途同img标签中的title一样 ③a标签不仅可以让文字被点击同时也可以让图片被点击 ④一个a标签必须有一个href属性 ⑤如果通过a标签指定一个URL地址必须在地址前加上http://或https:// 7base标签
作用用来统一指定当前页面所有a标签需要如何打开
注①base标签必须写在head标签内
②如果即在base中指定了target又在a标签中指定了target那么会以a标签为准
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1titlea标签/titlebase target_blank
/head
bodya hrefhttps://www.baidu.com/ target_self title百度一下点击去百度/abra hrefhttps://news.baidu.com/新闻/aa hrefhttps://news.baidu.com/地图/aa hrefhttps://image.baidu.com/图片/a
/body
/html 注释
vs中的快捷键平移可用
快速Ctrl/
路径问题
给scr属性赋值有两种方式一是相对路径二是绝对路径
假链接
即点击之后不会跳转的链接
格式①a href#xxxx/a ② a hrefjavascript:xxxxx/a
注两种格式之间的区别#的假链接会自动跳转到网页的顶部javascript:则不会
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title假链接/title
/head
bodyh1我是顶部/h1div styleheight: 300px;/diva href#点击1/aa hrefjavascript:点击2/a
/body
/html 锚点
实现a标签跳转到指定的位置
步骤①给目标位置的标签添加一个id属性指定一个独一无二的值
②告诉a标签跳转的目标标签对应的值
格式 a href#yyyyy跳动底部/a h1 idyyyyy我是底部/h1
注a标签即可以跳转到当前界面的指定位置也可以跳转到其他页面的指定位置
列表标签
列表标签的作用给数据添加列表语义使一堆数据作为一个整体
html中列表标签的分类无序列表、有序列表、定义列表
1无序列表
作用给一堆数据添加列表语义且数据没有先后之分
格式
ul li需要显示的条目内容/li
/ul
注在ul标签和li标签是一个整体在ul标签中只会看到li标签但可以在li标签中添加其他标签
2有序列表
同无序列表相比有序列表指定的数据有先后之分
格式
ol li需要显示的条目内容/li /ol
3定义列表
作用通过dt标签定义列表中的所有标题再通过dd标签给每个标题添加描述信息
格式
dl dt标题1/dt dd描述内容1111/dd dt标题2/dt dd描述内容2222/dd /dl
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title无序列表/titlestyleul {list-style: none;}li {float: left;background-color: red;width: 50px;height: 50px;text-align: center;margin-left: 10px;} /style
/head
bodyh1中国有哪些城市/h1ulli北京/lili上海/lili广州/li/ulolli北京/lili上海/lili广州/li/olbrbrdldt标题1/dtdd描述内容1111/dddt标题2/dtdd描述内容2222/dd/dl
/body
/html 表格标签
1table标签
作用给数据添加表格语义
格式 table tr td/td /tr
/table
注①一个table标签代表一个表格 ②一个tr标签标志整个表格中的一行数据 ③一个td标签表示表格一行数据中的一个单元格 ④表格标签有一个边框属性这个属性决定了边框的宽度默认情况下这个属性的值为0所以看不到边框
外边距单元格与单元格之间的距离
内边距单元格边框和文字之间的距离
细线表格table bgcolorblack cellspacing1px tr bgcolorwhite
以上内容仅作了解在企业开发中所有的控制样式都是通过css完成的 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1titletable表格的基本使用/title
/head
body!--要求写一个表格这个表格中有2行3列--!-- align水平对齐ta、tr、tbvalign垂直对齐tr、tdcellspacing外边距cellpadding内边距内外均ta --table bgcolorblack aligncenter cellspacing1px width500px height300pxtr bgcolorwhitetd1/tdtd2/tdtd3/td/trtr bgcolorwhitetd11/tdtd22/tdtd33/td/tr/tablebrtable border1 aligncenter width500px height300px cellspacing15px cellpadding20trtd aligncenter1/tdtd2/tdtd3/td/trtrtd11/tdtd22/tdtd33/td/tr/table
/body
/html 2caption标签
作用指定表格标题自动根据表格宽度居中且加粗
注①caption标题一定要在table标签中要不无效 ②caption标签一定要紧跟在table标签之后
3thead标签
作用指定表格表头信息
4tbody标签
作用指定表格主体信息
5tfoot标签
作用指定表格附加信息
注①如果没有写tbody系统会自动进行添加 ②如果指定了theadtfoot在指定整个表格的高度时theadtfoot有自己的默认高度不会随之改变
单元格合并一定说向后或向下合并
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1titletable表格单元格合并/title
/head
bodytable bgcolorblack cellspacing1px width500pxcaptionh1我是表格标题/h1/captiontheadtr bgcolor#a9a9a9th表头1/thth表头2/thth表头3/th/tr/theadtbodytr bgcolorwhitetd rowspan21/tdtd2/tdtd3/td/trtr bgcolorwhite!-- td11/td --td22/tdtd33/td/tr/tbodytfoottr bgcolorwhitetd colspan2/tdtd表格尾部/td/tr/tfoot/table
/body
/html 表单标签
作用用来收集用户信息
格式
form
表单元素
/form
1input标签
常见的表单元素input标签input标签有一个type属性这个属性有很多类型的取值取值的不同就决定了input标签的外观和功能
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title表单标签1-input/title
/head
bodyform!-- 明文输入框 --账号input typetextbrbr!-- 暗文输入框 --密码input typepasswordbrbr!-- 给输入框设置默认值 --账号input typetext valuelnjbrbr密码input typepassword value123456brbr!-- 单选框注意点:1、默认情况下单选框不会互斥要想单选框互斥那么必须给每一个单选框标签都设置一个name属性然后name属性还必须设置相同的值 2、要想让单选框默认选中某一个框子那么可以给input标签添加一个checked属性3、在HTML中如果属性的取值和属性的名称一样可以只写一个--性别input typeradio namegender男input typeradio namegender女input typeradio namegender checked保密brbr爱好input typecheckbox篮球input typecheckbox足球input typecheckbox checked棒球input typecheckbox checked羽毛球brbr!-- 定义一个普通按钮作用配合js完成一些操作 --input typebutton value提交 onclickalert(学习1)brbr!-- 定义一个图片按钮作用配合js完成一些操作 --input typeimage srcbutton.png onclickalert(学习2)brbr!-- 定义重置按钮作用:清空表单中的数据注意点:重置按钮有默认的按钮标题默认叫做重置也可以通过value属性来修改默认标题 --input typereset value清空!-- 定义提交按钮作用:将表单中的数据提交到远程服务器注意点:要想把表单中的数据提交到远程服务器,必须满足两个条件1.告诉表单需要提交到哪个服务器2.告诉表单,表单中的哪些数据需要提交 --input typesubmit !-- 隐藏域作用:用于悄悄咪咪的收集用户的一些数据,隐藏域是不会出现在界面中的 --input typehidden nameage value50/form
/body
/html 2label标签
作用默认情况下文字和文本框是没有关联的label可以将文字和文本框绑在一起
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title表单标签3-label/title
/head
bodyformlabel foraccount账号/labelinput typetext idaccountbrbrlabel forpassword密码/labelinput typepassword idpasswordbrbr/form
/body
/html 3非input标签
select标签
作用用于定义下拉列表
格式
select option列表数据/option /select
textarea标签 textare/textarea
注①默认情况下输入框可以无限换行且有自己的高度和宽度 ②通过colsrows来指定宽度和高度
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title表单标签4-非input标签/title
/head
bodyselectoption列表数据1/optionoption列表数据2/optionoption列表数据3/optionoption列表数据4/option/selectbrtextarea cols14 rows6/textarea
/body
/html 多媒体标签
1video标签
作用播放视频
格式 video src /video
注video标签的第二种格式为了解决浏览器的适配问题通过source标签进行实现 2audio标签
作用嵌入音频内容 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1title多媒体标签/title
/head
body!-- video标签 --video srcshanghai.mp4 width640 height360 muted autoplay controls/video --!-- video标签第二种格式 --video width640 height360 controlssource srcshanghai.mp4 typevideo/mp4source srcshanghai.ogg typevideo/ogg您的浏览器不支持 video 标签。/video audio controlssource srcsong.mp3 typeaudio/mpegsource srcsong.ogg typeaudio/ogg您的浏览器不支持 audio 标签。/audioh1forall;/h1
/body
/html 字符实体HTML 符号实体参考手册 | 菜鸟教程
