网站开发的价格,网站已备案 还不能访问,什么属于网页制作工具,请问下网站开发怎么弄Web之HTML、CSS、JS Web标准一、HTML#xff08;超文本标记语言#xff09;HTML 基本结构标签常用标签1.font标签2.p标签3.注释4.h系列标题5.img6.超链接a7.列表8.表格9.表单 Web之CSS笔记
Web标准
结构标准用于对网页元素进行整理和分类(HTML)表现标准用于设置网页元素的版… Web之HTML、CSS、JS Web标准一、HTML超文本标记语言HTML 基本结构标签常用标签1.font标签2.p标签3.注释4.h系列标题5.img6.超链接a7.列表8.表格9.表单 Web之CSS笔记
Web标准
结构标准用于对网页元素进行整理和分类(HTML)表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)行为标准用于对网页模型的定义及交互的编写(JavaScript)
一、HTML超文本标记语言
HTML 基本结构标签
标签名含义说明html/htmlHTML标签页面中的最大的标签称为跟标签head/head文档的头部注意在head标签中必须要设置的标签是titletitle/title文档的标题让页面拥有一个属于自己的网页标题body/body文档的主体元素包含文档的所有内容页面内容基本都是放到body里面的
常用标签
1.font标签
部分常用属性html5不支持该标签建议使用CSS
color属性修改颜色
face属性修改字体类型
size属性修改文本大小1-7font colorred face黑体 size3font字体标签/fontfont字体标签
2.p标签
全称paragraph用来表示段落它是一个行内元素一个标签独占一行。
p....../p......
br全称barter rabbet,换行标签用于插入一个换行符。3.注释
!-- 需求 在网页上显示 font字体标签 并修改字体为 黑体 颜色为红色。--4.h系列标题
h1到h6标题标签用于定义标题的级别h1是最高级别的标题依次递减。
h1标题标签1/h1
h2标题标签2/h2
h3标题标签3/h3
h4标题标签4/h4
h5标题标签5/h5
h6标题标签6/h6标题标签1
标题标签2
标题标签3
标题标签4
标题标签5
标题标签6
5.img
img: 图像标签用于插入图像通过src属性指定图像的URL可以是相对路径或绝对路径。
img srctest.jpg alt风景 title夜景 height100 /常用属性 alt属性alt属性用于指定图像的替代文本。当图像无法加载时替代文本会显示在图像的位置。width和height属性width和height属性用于指定图像的宽度和高度。可以使用像素(px)、百分比(%)或其他单位来指定。title:提示文本,鼠标放到图片上,就会有提示6.超链接a
用于从一个页面链接到另一个页面。
a hrefhttps://bilibili.com网址直接跳转/a
a hrefimages/1.webp相对路径跳转/a
a hrefhello.exe如果是打不开的文件则下载之/a
a href空链接是刷新/a
a href##是回到顶部/a
a hrefjavascript:;禁止链接跳转/a网址直接跳转 相对路径跳转 如果是打不开的文件则下载之 空链接是刷新 #是回到顶部 禁止链接跳转
常用属性
target:打开方式,默认是_self.如果是_blank则用新的标签页打开锚点
href里面为#id变为锚点功能点击跳转到id对应的块。
1.快速定位到页面中的某个位置。
a href#one第一集/a
a href#two第二集/a
a href#three第三集/a
p idone第一集剧情 br第一集剧情 br...
/p
p idtwo第二集剧情 br第二集剧情 br...
/p
p idthree第三集剧情 br第三集剧情 br...
/p第一集 第二集 第三集 第一集剧情 第一集剧情 ... 第二集剧情 第二集剧情 ... 第三集剧情 第三集剧情 ...
2.跳转到不同页面的不同位置
a href”demo.html#锚点名称”demo.html页面 xxx元素位置/aa href”demo.html#box”demo.html页面box元素位置/ademo.html页面 xxx元素位置
demo.html页面box元素位置
7.列表
ul ——无序列表 ulli无序列表1/lili无序列表2/lili无序列表3/lili无序列表4/li/ul无序列表1无序列表2无序列表3无序列表4
ol ——有序列表 olli有序列表1/lili有序列表2/lili有序列表3/lili有序列表4/li/ol有序列表1有序列表2有序列表3有序列表4
8.表格
一种用于展示结构化数据的标记语言元素。 表格由 table 标签来定义。每个表格均有若干行由 tr 标签定义每行被分割为若干单元格由 td 标签定义。字母 td 指表格数据table data即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。
caption标签:表格的标题
thead标签:表格的页眉
tbody标签:表格的主体
tfoot标签:表格的页脚
th标签:行/列的标题文字加粗显示table border1px bgcolorgreen bordercoloryellow width300pxheight175pxcaption鲜鱼价目表/captionthead!-- 表头部分 --trth序号/thth鱼的种类/thth价格/th/tr/theadtbody !--表主体部分--tr aligncentertd1/tdtd草鱼/tdtd18.6/td/trtr valigntoptd2/tdtd鲤鱼/tdtd28.9/td/trtrtd3/tdtd食人鱼/tdtd1000/td/tr/tbody/table鲜鱼价目表 序号鱼的种类价格1草鱼18.62鲤鱼28.93食人鱼1000
table标签的属性
border“1px” 设置边框bgcolor“green” 设置背景颜色bordercolor“yellow” 设置边框颜色width“300px” 设置表格的宽度height“175px” 设置表格的高度table表格里的边框是带有间距的 解决方案就是给table标签加: styleborder-collapse: collapse; 去掉边框间的间距align“center” 设置表格本身的水平对齐方式注意不是文字居中而是整张表格在页面居中显示
tr标签的属性
align“” 设置内容的水平对齐方式 left靠左/center居中/right靠右valign“” 设置内容的垂直对齐方式 top靠上/middle居中/bottom靠下
td标签的属性
colspan“n” 跨列从当前单元格开始向右合并n个单元格(n也包含当前单元格)rowspan“n” 跨行从当前单元格开始向下合并n个单元格(n也包含当前单元格)
!-- tabletr*3td*4 在数字后按Tab补全--table border1px width300px height200pxtrtd colspan21-1/td!-- 被合并的单元格一定得删掉 --!-- td1-2/td --td1-3/tdtd1-4/td/trtrtd2-1/tdtd rowspan22-2/tdtd2-3/tdtd2-4/td/trtrtd3-1/td!-- 被合并的单元格一定要删掉 --!-- td3-2/td --td3-3/tdtd3-4/td/tr/tablehr !-- 创建一条水平线 --1-11-31-42-12-22-32-43-13-33-4 9.表单
HTML 表单用于收集用户的输入信息。 HTML 表单表示文档中的一个区域此区域包含交互控件将用户收集到的信息发送到 Web 服务器。 一个完整的表单包含三个基本组成部分表单标签、表单域、表单按钮。
form表单标签 !-- 表单域包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等 --input typetext表单域 button typesubmit提交按钮/button
/forminput属性
type
type值表单类型text单行文本框passworld密码文本框button按钮reset重置按钮image图像形式的提交按钮radio单选按钮checkbox复选框hidden隐藏字段file文件上传
name属性给出当前input表单的名字。value属性表示该input表单的默认值。 1当input type“text”、“password”、hidden时value中的值会成为其输入框的初始值 2当input type“button”、“reset”、submit时定义按钮上的显示的文本 3当input type“checkbox”、“radio”、image时定义与输入相关联的值 注意input typecheckbox和input typeradio中必须设置value属性value属性无法与input typefile一通使用。style属性为input元素设置简单的CSS样式。width属性当input typeimage时通过width属性控制元素的宽度height属性当input typeimage时通过height属性控制元素的高度maxlength属性定义input元素中可输入的最长字符数。
select和option创建下拉式表单
select option value1 selectedselectedqq.com/optionoption value2163.com/optionoption value3tongji.edu.cn/option
/selectselected标注默认选中的内容。
textarea标签创立多行文本框
textarea nameintroduction idintroduction cols30 rows10/textarea表单示例
!DOCTYPE html
html langen
headmeta charsetUTF-8title表单/title
/head
bodyform action methodlabel请输入姓名/labelinput typetext name idbrlabel请输入密码/labelinput typepassword name idbrlabel再次输入密码/labelinput typepassword name idbrlebel性别/lebelinput typeradio namexb id value1男input typeradio namexb id value0女brlabel兴趣爱好/labelinput typecheckbox name id value1游泳input typecheckbox name id value2看书input typecheckbox name id value3爬山input typecheckbox name id value4思考brlabel生日/labelselectoption value19951995/optionoption value19961996/optionoption value1997 selectedselected1997/optionoption value19981998/optionoption value19991999/optionoption value20002000/option/select年selectoption value101/optionoption value202/optionoption value303/optionoption value44/optionoption value55/option/select月selectoption value101/optionoption value202/optionoption value303/optionoption value44/optionoption value55/option/select日br头像img srcimage/headLogo/13.gifselectoption value11/optionoption value22/optionoption value33/optionoption value44/option/selectbrinput typebutton value普通按钮input typesubmit value提交按钮/formtextarea rows10 cols100 name id请输入/textareainput typefileinput typebutton value上传br000input typehidden name id000select size4 multipletrueoption value11/optionoption value22/optionoption value33/optionoption value44/optionoption value441/optionoption value4242/optionoption value4343/optionoption value4444/optionoption value4545/option/selectselect size4 multipletrue/select
/body
/html
