wordpress字数,seo内链优化,在试用网站做推广,泉州做网站设计公司本节⽬标
认识 HTML 的基本结构, 学习常⽤的 HTML 标签. 一 HTML基础
1.什么是HTML
HTML(Hyper Text Markup Language), 超⽂本标记语⾔.
超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它…本节⽬标
认识 HTML 的基本结构, 学习常⽤的 HTML 标签. 一 HTML基础
1.什么是HTML
HTML(Hyper Text Markup Language), 超⽂本标记语⾔.
超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.
标记语⾔: 由标签构成的语⾔ HTML的标签都是提前定义好的, 使⽤不同的标签, 表⽰不同的内容. 类似⻜书⽂档, Word⽂档 如果选中⽂本, 点击标题1, 就会使⽤标题1的样式来显⽰⽂本, 上述标题1就是⼀个标签 ⽐如下⽅代码:
h1我是⼀级标题/h1
h2我是⼆级标题/h2
h3我是三级标题/h3
经过浏览器解析后的效果如下: 上⾯代码中的h1 h2 h3 就是标签
学习HTML 主要就是学习标签.
2.认识 HTML 标签
HTML 代码是由 标签 构成的.
形如: h3我是三级标题/h3 •标签名 (body) 放到 中
•⼤部分标签成对出现. h1 为开始标签, /h2 为结束标签.
•少数标签只有开始标签, 称为 单标签.
•开始标签和结束标签之间, 写的是标签的内容.
开始标签中可能会带有 属性. id 属性相当于给这个标签设置了⼀个唯⼀的标识符(⾝份证号码).
h3 idmyId我是三级标题/h3 3.HTML ⽂件基本结构
!DOCTYPE html
htmlheadtitle/title/headbody/body
/html
• html 标签是整个 html ⽂件的根标签(最顶层标签)
• head 标签中写⻚⾯的属性.
• body 标签中写的是⻚⾯上显⽰的内容
• title 标签中写的是⻚⾯的标题. 4.标签层次结构
• ⽗⼦关系
• 兄弟关系
其中:
• head 和 body 是 html 的⼦标签(html 就是 head 和 body 的⽗标签)
• title 是 head 的⼦标签. head 是 title 的⽗标签.
• head 和 body 之间是兄弟关系. 可以使⽤ chrome 的开发者⼯具查看⻚⾯的结构. F12 或者右键审查元素, 开启开发者⼯具, 切换到 Elements 标签, 就可以看到⻚⾯结构细节. 标签之间的结构关系, 构成了⼀个 DOM树 DOM 是 Document Object Mode (⽂档对象模型) 的缩写. 二 HTML 快速⼊⻔
1.开发⼯具 HTML 可以使⽤系统⾃带的记事本来编写, 但是⾮常不⽅便, 我们课程中使⽤前端专业的开发⼯具:Visual Studio Code Visual Studio Code简称VS Code是Microsoft在2015年4⽉30⽇Build开发者⼤会上宣布的⼀款跨平台源代码编辑器. 可以运⾏在Windows, macOS 和Linux上. 它具有对JavaScriptTypeScript和 Node.js的内置⽀持并具有丰富的其他语⾔(例如CCJavaPythonPHPGo).
• 官⽹ https://code.visualstudio.com
进⾏下载, 安装即可.
2.快速开发
在 VS Code中创建⽂件 xxx.html , 直接输⼊ ! , 按 Enter或 tab 键, 此时能⾃动⽣成代码的主体框
架.
!DOCTYPE html
html
headmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1title我的第一个HTML文件/title
/head
bodyh1/h1
/body
/html细节解释: • !DOCTYPE html 称为 DTD (⽂档类型定义), 描述当前的⽂件是⼀个 HTML5 的⽂件. • html langen 其中 lang 属性表⽰当前⻚⾯是⼀个 英语⻚⾯. 这⾥暂时不⽤管. (有些 浏览器会根据此处的声明提⽰是否进⾏⾃动翻译). • meta charsetUTF-8 描述⻚⾯的字符编码⽅式. 没有这⼀⾏可能会导致中⽂乱码. • meta nameviewport contentwidthdevice-width, initial-scale1.0 • nameviewport 其中 viewport 指的是设备的屏幕上能⽤来显⽰我们的⽹⻚的那⼀块 区域. • contentwidthdevice-width, initial-scale1.0 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放. (这个属性对于移动端开发更重要⼀些). 在body/body标签中, 任意书写⽂字, 按Ctrl s 保持⽂件, 通过浏览器访问即可. 3.HTML常⻅标签
行级标签h1-h6、p、div
块级标签a、input、span
1标题标签 h1-h6
有六个, 从 h1 - h6. 数字越⼤, 则字体越⼩. h1hello/h1h2hello/h2h3hello/h3h4hello/h4h5hello/h5h6hello/h6 2段落标签: p
在HTML中, 段落, 换⾏符, 空格都会失效, 如果需要分成段落, 需要使⽤专⻔的标签 pWhat are you saying?/ppI dont know/p
注意:
• p 标签描述的段落, 前⾯没有缩进. (未来 CSS 会学)
• ⾃动根据浏览器宽度来决定排版.
• html 内容⾸尾处的换⾏, 空格均⽆效.
• 在 html 中⽂字之间输⼊的多个空格只相当于⼀个空格.
• html 中直接输⼊换⾏不会真的换⾏, ⽽是相当于⼀个空格. 3换⾏标签: br
想要完成换⾏的话, 也可以通过br/标签来实现.
br 是 break 的缩写. 表⽰换⾏.
• 大部分标签都是成对出现的但br 是⼀个单标签(不需要结束标签)
• br 标签不像 p 标签那样带有⼀个很⼤的空隙.
• br/ 是规范写法. 不建议写成 br
展⽰结果:
观察br标签和p标签的区别行与行之间距离不相同 4空格标签: nbsp;
想要完成添加多个空格的话, 可以通过nbsp;标签来实现.
• HTML中即使文本中间打上多个空格符实际上也就是相当于一个空格符
• 前面必须有结尾必须是分号 pnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;What are you saying?/ppI dont know/p 5图⽚标签: img
img 标签必须带有 src 属性. 表⽰图⽚的路径. img srcrose.jpg alt 此时要把 rose.jpg 这个图⽚⽂件放到和 html 中的同级⽬录中.
img 标签的其他属性
• width/height: 控制宽度⾼度. ⾼度和宽度⼀般改⼀个就⾏, 另外⼀个会等⽐例缩放. 否则就会图⽚失衡.
• border: 边框, 参数是宽度的像素. 但是⼀般使⽤ CSS 来设定. img srcrose.jpg width500px height800px border5px 注意:
1. 属性可以有多个, 不能写到标签之前
2. 属性之间⽤空格分割, 可以是多个空格, 也可以是换⾏.
3. 属性之间不分先后顺序
4. 属性使⽤ 键值对 的格式来表⽰. 关于⽬录结构: 对于⼀个复杂的⽹站, ⻚⾯资源很多, 这种情况可以使⽤⽬录把这些⽂件整理好. 1. 相对路径: 以 html 所在位置为基准, 找到图⽚的位置. 同级路径: 直接写⽂件名即可 (或者 ./) 下⼀级路径: image/1.jpg上⼀级路径: ../image/1.jpg 2. 绝对路径: ⼀个完整的磁盘路径, 或者⽹络路径. 例如 磁盘路径 D:/rose.jpg ( 最好使⽤ / , 不要使⽤ \ )⽹络路径 https://img2.baidu.com/it/u3359649605,3626874592fm253fmtautoapp138fJPEG?w500h752 6HTML特殊转义字符列表
最常用的字符实体Character Entities 7 超链接: a
• href: 必须具备, 表⽰点击后会跳转到哪个⻚⾯.
• target: 打开⽅式. 默认是 _self. 如果是 _blank 则⽤新的标签⻚打开. a hrefhttp://www.baidu.com百度/a 链接的⼏种形式:
• 外部链接: href 引⽤其他⽹站的地址
a hrefhttp://www.baidu.com百度/a • 内部链接: ⽹站内部⻚⾯之间的链接. 写相对路径即可. 在⼀个⽬录中, 先创建⼀个 1.html, 再创建⼀个 2.html • 空链接: 使⽤ # 在 href 中占位. a href#空链接/a 4 表格标签
table 标签: 表⽰整个表格tr: 表⽰表格的⼀⾏td: 表⽰⼀个单元格thead: 表格的头部区域tbody: 表格的主体区域.
table 包含 tr , tr 包含 td 表格标签有⼀些属性, 可以⽤于设置⼤⼩边框等. 但是⼀般使⽤ CSS ⽅式来设置. 这些属性都要放到 table 标签中. align 是表格相对于周围元素的对⻬⽅式. aligncenter (不是内部元素的对⻬⽅式)border 表⽰边框. 1 表⽰有边框(数字越⼤, 边框越粗), 表⽰没边框.cellpadding: 内容距离边框的距离, 默认 1 像素cellspacing: 单元格之间的距离. 默认为 2 像素width / height: 设置尺⼨.colspan合并单元列 注意, 这⼏个属性, vscode 都提⽰不出来. 以下为演示
1画出基本表格四行三列 table stylewidth: 500px;height: 400px; border1px blacktrtdaaa/tdtdbbb/td/trtrtdccc/tdtdddd/td/trtr/trtdeee/tdtdfff/tdtr/trtrtdggg/tdtdhhh/td/tr/table
2 将单元格中间间隔为0且列合并 trtd colspan2aaa/td!-- tdbbb/td --/tr 5 表单标签
表单是让⽤⼾输⼊信息的重要途径.
分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签.表单控件: 输⼊框, 提交按钮等. 重点是 input 标签.
1form 标签
form actiontest.html... [form 的内容]
/form
描述了要把数据按照什么⽅式, 提交到哪个⻚⾯中. 关于 form 需要结合后端代码来进⼀步理解. 后⾯再详细研究. method
get从服务端获得资源post向服务端发送资源
2input 标签
各种输⼊控件, 单⾏⽂本框, 按钮, 单选框, 复选框.
type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀.value: input 中的默认值.checked: 默认被选中. (⽤于单选按钮和多选按钮)
下⾯介绍⼀些常⽤的类型:
1. ⽂本框 text input typetext 2. 密码框 password input typepassword 3. 单选框 radio 性别input typeradio namegender 男 input typeradio namegender女 注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选⼀ 效果. 如果想要按字也可以选中该框应该用label去识别id 性别input typeradio namegender idgender1 label forgender1男 /labelinput typeradio namegender idgender2 label forgender2女/label 4. 复选框 checkbox 兴趣爱好input typecheckbox name id篮球input typecheckbox name id足球input typecheckbox name id排球input typecheckbox name id羽毛球br 5. 普通按钮 button button注册/buttoninput typebutton value按钮 当前点击了没有反应. 需要搭配 JS 使⽤(后⾯会重点研究). input typebutton value我是个按钮 onclickalert(hello) 6. 提交按钮 submit
form actiontest.htmlinput typetext nameusernameinput typesubmit value提交
/form
提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送请求
3select 标签 select-option
下拉菜单
• option 中定义 selectedselected 表⽰默认选中. 专业selectoption value1 selected计算机科学与技术/optionoption value2人工智能/optionoption value3软件工程/optionoption value4信息安全/option/selectbr 4textarea 标签 个人描述textarea rows10 cols10/textareabr ⽂本域中的内容, 就是默认内容, 注意, 空格也会有影响. rows 和 cols 也都不会直接使⽤, 都是⽤ css 来改的. 6 ⽆语义标签: divspan
div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒⼦. ⽤于⽹⻚布局
div 是独占⼀⾏的, 是⼀个⼤盒⼦.span 不独占⼀⾏, 是⼀个⼩盒⼦. divspan咬⼈猫/spanspan咬⼈猫/spanspan咬⼈猫/span/divdivspan兔总裁/spanspan兔总裁/spanspan兔总裁/span/divdivspan阿叶君/spanspan阿叶君/spanspan阿叶君/span/div (7) 综合练习: ⽤⼾注册
⽤⼾注册界⾯ 提⽰: 使⽤表格进⾏整体布局 使⽤各种 input 标签实现⻚⾯中的输⼊控件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyh1用户注册/h1tabletrtd用户名/tdtdinput typetext placeholder请输入用户名/td/trtrtd手机号/tdtdinput typetext placeholder请输入手机号/td/trtrtd密码/tdtdinput typepassword placeholder请输入密码/td/tr/tabledivbutton注册/buttonspan已有帐号/spana href#登录/abr/div
/body
/html
