有教做桥梁质检资料的网站吗,龙岗区最新通告,开发一个网站需要多久,广州市专业做商城网站目录
一、图片标签
① 绝对路径
1.绝对磁盘路径
2.绝对网络路径
② 相对路径 #xff08;推荐#xff09;
二、标题标签
三、水平线标签
四、标题样式
1、CSS引入样式
① 行内样式
② 内嵌样式
③ 外嵌样式
2、CSS选择器
① 元素选择器
② id选择器
③…目录
一、图片标签
① 绝对路径
1.绝对磁盘路径
2.绝对网络路径
② 相对路径 推荐
二、标题标签
三、水平线标签
四、标题样式
1、CSS引入样式
① 行内样式
② 内嵌样式
③ 外嵌样式
2、CSS选择器
① 元素选择器
② id选择器
③ 类选择器
五、超链接
六、视频标签
七、音频标签
八、换行、段落、文本加粗
九、页面布局 1、div 2、span 3、盒子模型 十、表格标签 十一、表单标签 1、主体 2、表单项 1input 2select 3textarea 十二、代码展示 一、图片标签 img src指定图片的url绝对路径 / 相对路径width宽度 px像素%相对于父元素的百分比height高度 px像素%相对于父元素的百分比 ① 绝对路径 1.绝对磁盘路径 右键图片属性 —— 安全 —— 复制对象名 img srcC:\Users\24453\Desktop\容宝网站\img\sina.jpg 2.绝对网络路径 右键网页图片—— 在新标签页中打开图片 —— 复制路径img srchttps://img-home.csdnimg.cn/images/20201124032511.png ② 相对路径 推荐 ./ 当前目录可省略../ 上一级目录 二、标题标签 h1 - h6
三、水平线标签 hr
四、标题样式 1、CSS引入样式 ① 行内样式 写在标签style属性中不推荐 h1 style属性名:属性值;属性名:属性值;中国新闻网/h1 ② 内嵌样式 写在style标签中可以写在页面任何位置通常写在head标签中 styleh1{属性名:属性值;属性名:属性值;}
/style ③ 外嵌样式 写在一个单独的.css文件中需要通过link标签在网页中引入 link relstylesheet hrefcss/news.css 实例 !DOCTYPE html !-- 文档类型为html --
html langen
headmeta charsetUTF-8 !-- 字符集是UTF-8 --meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 设置浏览器兼容性 --title页面标题/title!-- 方式二内嵌样式 --styleh1{color: brown;}/style !-- 方式三外嵌样式 --link relstylesheet href./news.css/head
bodyimg srcimg/sina.jpg width7% div stylefont-size: 6px;日常 分享/div!-- 方式一行内样式 --h1 stylecolor: firebrick;标题样式/h1 h1标题样式/h1hr2023年8月11日 13:14 容宝网hr/body
/html 2、CSS选择器 优先级id选择器 类选择器 元素选择器 ① 元素选择器 元素名称{color:red;
}h1{color:red;
}h1 新闻联播网 /h1 ② id选择器 #id属性值{color:red;
}#hid{color:red;
}h1 idhid 新闻联播网/h1 ③ 类选择器 .class属性值{color:red;
}.cls{color:red;
}h1 classcls 新闻联播网 /h1 实例 !DOCTYPE html !-- 文档类型为html --
html langen
headmeta charsetUTF-8 !-- 字符集是UTF-8 --meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 设置浏览器兼容性 --title震惊/title!-- 方式二内嵌样式 --styleh1{color: #4d4f53;}/*元素选择器*/span{font-size: 9px;}/*类选择器*/.cls{font-size: 13px;}/*id选择器*/#time{font-size: 13px;color: #888888;}/style /head
bodyimg srcimg/sina.jpg width7% span恋爱日常 分享/spanh1震惊/h1hrspan idtime2023年8月11日 13:14/span span classcls容宝网/spanhr/body
/html 五、超链接 a hrefhttps://baidu.com容宝网/a href指定资源访问的urltarget指定在何处打开链接 -self默认值在当前页面打开-blank在空白页面打开 实例 !DOCTYPE html !-- 文档类型为html --
html langen
headmeta charsetUTF-8 !-- 字符集是UTF-8 --meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 设置浏览器兼容性 --title震惊/title!-- 方式二内嵌样式 --styleh1{color: #4d4f53;}/*元素选择器*/span{font-size: 9px;}a{color: black;font-size: 9px;text-decoration: none; /*设置文本为一个标准文本*/}/*类选择器*/.cls{font-size: 13px;}/*id选择器*/#time{font-size: 13px;color: #888888;}/style /head
bodyimg srcimg/sina.jpg width7% a hrefhttp://a1.qpic.cn/psc?/V14VhVNg3Nze2g/ruAMsa53pVQWN7FLK88i5trZindRPxrCd5.1hAnkqYpnYt0lG3I8orRJ7G6BW4*wD6tudjBtHYTHrKhTTTCpRgE0XMPKeNnMPB19JxLqhw!/mek1kp1pt0boAAYFBgAGBQYWECA!tl3vuin2445374256tm1691762400dis_t1691762594dis_kdf10ce7ce1b689b7c90b15bc539e7536sce60-4-3rfviewer_311 target_blank恋爱日常/aspan 分享/spanh1震惊/h1hrspan idtime2023年8月11日 13:14/span a hrefhttps://blog.csdn.net/weixin_61639349?typeblogspan classcls容宝网/span/ahr/body
/html 六、视频标签 video
video src./video/VID_20230808_173135.mp4 controls width200px/video !--controls是允许播放--
七、音频标签 audio
audio srcaudio/1.mp3 controls/audio
八、换行、段落、文本加粗
br 换行p 段落b strong 文本加粗line-height 设置行高text-indent 首行缩进text-align 文本水平对其方式nbsp; 生成一个空格
九、页面布局 div span 1、div 一行只显示一个(独占一行)宽度默认是父元素的宽度高度默认由内容撑开可以设置宽高width、height) 2、span 一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高( width、height) 3、盒子模型 stylediv{width:200px;height:200px;box-sizing:border-box; /*指定width height为盒子的高宽*/background-color:red; /*背景色*/padding:20px 20px 20px 20px; /*内边距 上 右 下 左 顺时针*/border:10px solid red; /*边框宽度 线条类型 颜色*/margin:30px 30px 30px 30px; /*外边距 上 右 下 左 顺时针*/}
/style 十、表格标签 table 标签描述备注table 定义表格整体 可以包裹多个tr border规定表格边框宽度width规定表格宽度cellspacing规定单元格间的空间tr表格的行可以包裹多个tdtd单元格如果是表头单元格可以替换为th有加粗和居中效果 十一、表单标签 form
1、主体 action表单提交的url往何处提交数据如果不指定默认提交到当前页面method表单提交方式 get在url后面拼接表单数据比如?用户名容也同学年龄20url长度有限制默认值 form action methodget用户名input typetext name用户名年龄input typetext name年龄input typesubmit value提交
/form post在消息体中传递参数大小无限制 form action methodpost用户名input typetext name用户名年龄input typetext name年龄input typesubmit value提交
/form 2、表单项 1input 表单项通过type属性控制输入形式 2select 定义下拉列表option定义列表项 3textarea 定义文本域 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title注册页面/title
/headbodyform action methodpost用户名input typetext name用户名brbr密码input typepassword name密码brbr性别labelinput typeradio name性别 value1男/labellabelinput typeradio name性别 value2女/labelbrbr用餐偏好labelinput typecheckbox name中餐中餐/labellabelinput typecheckbox name西餐西餐/labellabelinput typecheckbox name日料日料/labellabelinput typecheckbox name韩餐韩餐/labellabelinput typecheckbox name东南亚风味东南亚风味/labelbrbr生日input typedate name生日brbr时间input typetime name时间brbr邮箱input typeemail name邮箱brbr年龄input typenumber name年龄brbr学历select name学历option value--------请选择---------/optionoption value1本科/optionoption value2大专/optionoption value3硕士/optionoption value4博士/option/selectbrbr头像input typefile nameimage brbr个人简介textarea name个人简介 cols30 rows10/textareabrbrinput typesubmit value提交input typereset value重置input typebutton name按钮br/form
/body
/html 十二、代码展示
!DOCTYPE html !-- 文档类型为html --
html langen
headmeta charsetUTF-8 !-- 字符集是UTF-8 --meta nameviewport contentwidthdevice-width, initial-scale1.0 !-- 设置浏览器兼容性 --title震惊西安居然发生了这种事/title!-- 方式二内嵌样式 --styleh1{color: #4d4f53;}/*元素选择器*/span{font-size: 9px;}a{color: black;font-size: 9px;text-decoration: none; /*设置文本为一个标准文本*/}p{text-indent: 35px; /*首行缩进*/line-height: 30px; /*设置行间距*/}video{display: block;margin: 0 auto;}table{text-align: center;}/*类选择器*/.cls{font-size: 13px;}/*id选择器*/#time{font-size: 13px;color: #888888;}#plast{text-align: right; /*设置对其方式*/}#center{width:65%;/*margin:0% 17.5% 0% 17.5%; 设置外边距上 右 下 左 */margin:0 auto;}#mid{display: block;margin: 0 auto;}/style /head
bodydiv idcenter!-- —————————————————————— 标题部分 ———————————————————————— --img srcimg/sina.jpg width12% a hrefhttp://a1.qpic.cn/psc?/V14VhVNg3Nze2g/ruAMsa53pVQWN7FLK88i5trZindRPxrCd5.1hAnkqYpnYt0lG3I8orRJ7G6BW4*wD6tudjBtHYYTHrKhTTTCpRgE0XMPKeNnMPB19JxLqhw!/mek1kp1pt0boAAYFBgAGBQYWECA!tl3vuin2374256tm1691762400dis_t1691762594dis_kdf10ce7ce1b689b7c90b15bc539e7536sce60-4-3rfviewer_311 target_blank恋爱日常/aspan 分享/spanh1震惊西安居然发生了这种事/h1hrspan idtimenbsp; nbsp; 2023年8月11日 13:14/span a hrefhttps://blog.csdn.net/weixin_61639349?typeblogspan classcls容宝网/span/ahr!-- —————————————————————— 正文部分 ———————————————————————— --pb容宝网消息/b聚焦西安据了解xx。/pimg idmid src./img/htmlMTXX_MH20230807_214202042.jpg width300pxpxxxxxxx购置了西瓜和葡萄。/pimg idmid src./img/htmlMX_MH20230807_204455741.jpg width300pxp由于许xxxx/ptable border0 cellspacing5trtdimg src./img/htmlMTXX_MH20230807_211045065.jpg width300px/tdtdimg src./img/htmlMTXX_MH2230807_204911532.jpg width300px/tdtdimg src./img/htmlMTXX_MH2023080_220415058.jpg width300px/td/tr/tablep第二天xxx/pvideo src./video/VID_20230808_173135.mp4 controls width200px/video !--controls是允许播放--p idplast责任编辑小白 SN242/p/div
/body
/html
