深圳制作外贸网站设计图片背景

当前位置： 首页 > news >正文

深圳制作外贸网站,设计图片背景,分析影响网站排名的因素,怀化网站seo1. 什么是 HTML HTML#xff08;Hyper Text Markup Language#xff09;#xff0c;超文本标记语言 超文本#xff1a;比文本要强大#xff0c;通过链接和交互方式来组织和呈现信息的文本形式#xff0c;不仅有文本#xff0c;还可能包含图片、音频、或者自己已经审阅…1. 什么是 HTML HTMLHyper Text Markup Language超文本标记语言 超文本比文本要强大通过链接和交互方式来组织和呈现信息的文本形式不仅有文本还可能包含图片、音频、或者自己已经审阅过的学者所加的评注、补充或脚注等 标记语言由标签构成的语言 HTML 的标签都是提前定义好的使用不同的标签表示不同的内容如以下代码 上面代码中的 h1h2h3 就是标签 1.1 认识 HTML 标签 HTML 代码是由 “标签” 构成的特点如下 标签名body放到 中大部分标签成对出现h1 为开始标签/h1 为结束标签少数标签只有开始标签称为 “单标签”开始标签和结束标签之间写的是标签的内容开始标签中可能会带有 “属性” 如id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)如下代码 h3 idmyId我是三级标题/h3 1.2 HTML 文件基本结构 htmlheadtitle第一个页面/title/headbodyhello world/body /html html 标签是整个 html 文件的根标签最顶层标签head 标签中写页面的属性body 标签中写的是页面上显示的内容title 标签中写的是页面的标题 1.3 标签层次结构 父子关系兄弟关系 htmlheadtitle第一个页面/title/headbodyhello world/body /html 其中 head 和 body 是 html 的子标签html 就是  head 和 body 的父标签title 是 head 的子标签head 是 title 的父标签head 和 body 之间是兄弟关系 tip 可以使用浏览器的开发者工具查看页面的结构 F12 或 鼠标右键检查开启开发者工具切换到 Elements 标签就可看到页面结构细节 标签之间的结构关系构成了一个 DOM 树DOM 是 Document Object Mode文档对象模型的缩写 1.4 HTML 快速入门 开发工具Visual Studio Code 在 VS Code 中创建文件 xxx.html直接输入 ! 按 Enter 或 tab 键此时能自动生成代码的主体框架如下 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head body/body /html 在 body/body 标签中任意书写文字按 Ctrl s 保存文件通过浏览器访问即可如 1.5 HTML 常见标签 1.5.1 标题标签 h1-h6 从 h1 到 h6数字越大字体越小 1.5.2 段落标签p 在 HTML 中段落、换行符、空格都会失效如果需要分成段落需要使用专门的标签 p 标签表示一个段落 tip p 标签描述的段落前面没有缩进自动根据浏览器宽度来决定排版html 内容首尾处的换行、空格均无效在 html 中文字之间输入的多个空格只相当于一个空格html 中直接输入换行不会真的换行而是相当于一个空格 1.5.3 换行标签br 换行通过 br/ 标签实现br 是 break 的缩写表示换行 br 是一个单标签不需要结束标签 br 标签不像 p 标签那样带有很大的空隙 br/ 是规范写法不建议写成 br虽然浏览器有很好的 “鲁棒性”但这里没有问题不代表后面也没问题 1.5.4 图片标签img img 标签必须带有 src 属性表示图片的路径 img srcrose.jpg 此时要把 rose.jpg 这个图片放到和 html 中的同级目录中 img 标签的其他属性 width / height控制宽度高度高度和宽度一般改一个就行另一个会等比例缩放否则就会图片失衡 border边框参数是宽度的像素但是一般会使用 CSS 来设定 tip 属性可以有多个不能写到标签之前属性之间用空格分割可以是多个空格也可以是换行属性之间不分先后顺序属性使用 “键值对” 的格式来表示 关于目录结构 对于一个复杂的网站页面资源很多这种情况可以使用目录把这些文件整理好

1. 相对路径以 html 所在位置为基准找到图片的位置 同级路径直接写文件名即可或者 ./下一级路径image/1.jpg上一级路径../image/1.jpg
2. 绝对路径一个完整的磁盘路径或者网络路径 磁盘路径 D:/rosr.jpg最好使用 /不要使用 \网络路径 https://cn.bing.com/images/search?viewdetailV2ccidwtpfIxZvid0EB129930EAA55858F09715E195BAEA0462DF70EthidOIP.wtpfIxZvYE3XmBVy7hovYgHaEnmediaurlhttps%3A%2F%2Fimg-blog.csdnimg.cn%2F4dfc7057ff0f406187a2c7def724b99a.pngexph508expw816qjavasimid608049172503483542formIRPRSTck0498F3C0DC5285A86C54AA8EBE301A5Aselectedindex1itb0ajaxhist0ajaxserp0vt0sim11 1.5.5 超链接a href必须具备表示点击后会跳转到哪个页面 target打开方式默认是 _self如果是 _blank 则用新的标签页打开 链接的几种形式
3. 外部链接href 引用其他网站的地址 a hrefhttps://www.baidu.com百度/a
4. 内部链接网站内部页面之间的链接写相对路径即可 在一个目录中先创建一个 demo1.html再创建一个 demo2.html target 设置为 _blank 3. 空链接使用 # 在 href 中占位 a href#空链接a 用于此处需要插入超链接但还不知道插入哪个的时候 1.5.6 表格标签 table 标签表示整个表格tr表示表格的一行td表示一个单元格thead表格的头部区域tbody表格的主体区域 table 包含 trtr 包含 td 表格标签中有一些属性可以用于设置大小边框等但是一般使用 CSS 方式来设置这些属性都要放到 table 标签中 align 是表格相对于周围元素的对齐方式aligncenter不是内部元素的对其方式border 表示边框1 表示有边框数字越大边框越粗 表示没边框cellpadding内容距离边框的距离默认 1 像素cellspacing单元格之间的距离默认 2 像素width / height设置尺寸 快速生成 tabletrtd姓名/tdtd性别/tdtd年龄/td/trtrtd张三/tdtd男/tdtd10/td/trtrtd李四/tdtd女/tdtd18/td/tr/table 加上属性 table aligncenter border1 cellpadding20 cellspacing0 width500 height500 1.5.7 表单标签 表单是让用户输入信息的重要途经分为两个部分 表单域包含表单元素的区域重点是 form 标签表单控件输入框提交按钮等重点是 input 标签 1) input 标签 各种输入控件单行文本框、按钮、单选框、复选框 type(必须有)取值种类很多如button、checkbox、text、file、image、password、radio 等name给 input 起了个名字尤其是对于单选按钮具有相同的 name 才能多选一valueinput 中的默认值checked默认被选中用于单选按钮和多选按钮 常用的类型
5. 文本框 2. 密码框 3. 单选框 tip单选框之间必须具备相同的 name 属性才能实现 多选一 效果
6. 复选框 5. 普通按钮 当前点击了没有反应需要搭配 JS 使用 6. 提交按钮 form actiondemo1.htmlinput typetext nameusernameinput typesubmit value提交/form 提交按钮必须放到 form 标签中点击后就会尝试给服务器发送请求
7. select 标签 下拉菜单option 中定义 selectedselected 表示默认选中 3) textarea 标签 文本域中的内容就是默认内容空格也会有影响 rows 和 clos 不会直接使用都是用 CSS 来改的 4) form 标签 form actiondemo1.html…[form 的内容]/form 描述了要把数据按照什么方式提交到哪个页面中 5) 无语义标签div span div 标签division 的缩写含义是分割 span 标签含义是跨度 类似于两个盒子用于网页布局 div 是独占一行的是一个大盒子 span 不独占一行是一个小盒子 1.6 练习用户注册 用户注册界面 代码 h1用户注册/h1tabletrtd用户名/tdtdinput typetext placeholder请输入用户名/td/trtrtd手机号/tdtdinput typetext placeholder请输入手机号/td/trtrtd密码/tdtdinput typepassword placeholder请输入密码/td/tr/tabledivinput typebutton value注册span已有账号/spana href#登录/abr//div