HTML入门与实战
jerry
2020-11-04
HTML入门与实战 Web基础 HTML入门 HTML标签 常见浏览器 浏览器内核 web标准 HTML初识 HTML骨架 标签简介 什么是标签及其分类 标签嵌套和并列关系 生成html骨架 doctype文档类型 字符集简介 标签的语义化及 标题标签 段落标签和水平线标签 换行和div span标签 文本格式化标签 标签属性 图像标签 链接标签 锚点定位 base标签 特殊字符 注释标签 相对路径 无序列表的使用 有序列表 定义列表 Chrome Firefox IE Edge Safari 常用内核 分两部分 后来JS越来越独立了, 内核就只倾向于指渲染引擎 渲染引擎(layout engineer) 子主题 JS引擎 Trident(IE内核) 很多双核浏览器其中一核便是Trident, 名其名曰"兼容模式" Gecko(Firefox内核) Edge(Win10后) webkit(Safari) Blink(Chrome) Presto(Opera) Opera 现在用Chrome内核了 结构标准 样式标准 行为标准 用于网页元素整理, 分类, 主要包裹XML和XHTML 用于设置网页元素的版式, 颜色, 大小等外观样式, 主要指CSS 网页模型的定义及交互的编写, 主要包括DOM和ECMAScript ps : .html, .css, .js HTML(英文Hyper Text Markup Language),超文本标记语言, 描述网页中的文本, 图片, 声音等内容 <html> <head> <title> Jerry的网站 </title> </head> <body> </body> </html> html 标签 作用 : 所有html中标签的根节点 head 标签 作用 : 用于存放title(title是必须要设置的), meta,base, style, script,link title标签 : 网页的标题 body 标签 作用 : 网页的主体部分, 用于存放所有的html标签 :p,h,a,b,u,i ,s, em, del, ins, strong, img 带有"<>"符号的元素被称为HTML标签, 用来描述网页中的元素 双标签 : <标签名> 内容 </ 标签名> 单标签 : <标签名 /> 也称空标签, 很少 结束标签前加了个关闭符"/" VSCode和 sublime 首行输入"html:5"或"!", 回车会自动生成 <!DOCTPYE>标签位于文档前面,作用是告诉浏览器我们使用的版本 <meta charset="UTF-8"> 描述使用的编码格式, utf-8是最常用的字符集编码方式 HTML提供6个等级的标题 <h1>, <h2>,<h3>,<h4>, <h5>,<h6> <h1>是重要的标题(最大的) <h1>是重要的标题(最大的), 一个网页里尽量少用 <p> </p> <hr /> 段落(paragraph)标签 水平线(horizon)标签 <br /> 换行(break)标签 span标签 没有语义, 是 网页布局 的主要两个盒子 division(分割,分区),默认独占一行 斜体 粗体 加删除线 加下划线 <b> </b> <strong> </strong> XHTML里推荐用strong, 因为有表示强调的语义 bold(加粗, 粗体) <i> </i> <em> </em> <s> </s> <del> </del> <u> </u> <ins> </ins> Italics(斜体) b, i ,s, u 都只有使用, 没有强调的意思 有表示强调的语义 有表示强调的语义 有表示强调的语义 underline(下划线) <标签名 属性1="属性值1" 属性2="属性值2" ... >内容</标签名> 语法 任何标签都有默认属性, 省略该属性则取默认值 标签可以有多个属性, 必须写在开始标签中, 为于标签名后 <标签名 属性" 属性值" /> 常用属性名 width color 例 : <hr width="500" /> 常用键值对 : key="value" 属性之间不分先后顺序, 标签名于属性, 属性与属性之间以空格分开 <img src="图像URL" /> 单标签 ...... <img/>属性 src URL, 图片的路径 alt 文本, 图像不能显示时替换的文本 title 文本, 鼠标悬停时显示的内容 width 像素, 设置图片宽度, XHTML不支持%页面百分比 最好设置图片尺寸, 不然图像加载时可能影响页面布局 height border 数字 : 设置图片边框的宽度 <a href="跳转目标”target="目标窗口的弹出方式" >文本或图像</a> anchor(锚,铁锚的) 属性 href Hypertext Reference(超链接) : 指定目标url地址 target 指定链接页面的打开方式, 有self和blank两种 , self为默认值, blank为在新窗口打 开 说明 外部链接 : 需要添加 http:// www.***** 内部链接 : 直接链接内部页面名称即可 例 : <a href="index.html">首页</a> 当前没确定链接目标, 通常将href属性定义为"#", 表示该链接暂时为空链接 不仅可以创建文本超链接, 在网页中的各种网页元素, 如图像, 表格, 音频等都可以添 加超链接 <a href="#id">锚点定位</a> 创建链接文本 使用相应的id名标注跳转到目标位置 例 ; <a href="#jump">锚点定位</a> ...... <h5 id="jump">锚点跳转目标位</h5> 使用相应的id名标注跳转到目标位置 使用相应的id名标注跳转到目标位置 <base /> 单标签 例 : 设置默认新窗口打开链接 作用 : 为页面上的所有的相对链接规定默认 href 或默认target。 <base targe ="blank" /> <base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标。 在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部。 说明 : <base> 标签为页面上的所有的相对链接规定默认 URL 或默认目标。 在一个文档中，最多能使用一个<base> 元素,<base> 标签必须位于 <head> 元 素内部。 空格符 < > & ￥ ⑧ 。 ✖ 2 3 &nbsp; 小于号 &lt; 大于号 &gt; 和号 &amp; 人民币 &yen; © 版权 &copy; 注册商标 &reg; 摄氏度 &deg; ± 正负号 &plusmn; 乘号 &times; ➗ 除号 &divide; 平方2 (上标2) &sup2; 立方3 (上标3) &sup3; HTML为这些特殊字符准备了专门的替代代码 HTML为这些特殊字符准备了专门的替代代码 <!--注释语句--> "./", 当前文件所在目录 上一级文件夹: "../", 上两级"../../", 以此类推 <ul> <li> 无序标签</li> <li> 无序标签</li> ...... </ ul> Unordered list(无序列表) 注意 : <ur>和<ol>里只能放列标签<li>, <li>里可以放其他标签 表现:每项li前都自带一个圆点 <ol> <li> 无序标签</li> <li> 无序标签</li> ...... </ ol> Ordered list(有序列表) 表现:每项li前都自带一个圆点 定义列表项前没有任何符号 语法 <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> </dl> Definition list(定义列表) 还有很多内容有待扩展 列表 属性 type = none(无排序符号) 路径 绝对路径 http://ip:port/工程名/资源路径 表格标签 <table> </table> 属性 定义表格 width height align 设置单元格文本或表格对齐方式 表格标签 <tr> </tr> 行标签 <td> </td> 单元格标签 <th> </th> 表头标签 border 表格边框 cellspacing 设置单元格间距 例 跨行跨列表格 单元格属性 colspan 设置跨列 rowspan 设置跨行 例 iframe框架标签 可以在一个html页面开辟一个小窗口显示一个单独的页面 例 表单标签 什么是表单 表单时html页面中, 用来收集用户信息的所有元素集合, 然后把这些信息发送给服务 器 <form> </form> <input/> 输入 例 type(输入类型) text password radio 单选框 , name属性可以对其进行分组 checkbox 复选框 , checked="checked"表示默认选择 密码, 不可见 , value属性修改按钮上的文本 文本输入框 , value属性修改按钮上的文本 <select> </select>下拉列表框 <textarea> </textarea>多行输入 option 标签是下拉列表框中的选项 reset 是重置按钮 , value属性修改按钮上的文本 suimit 是提交按钮 , value属性修改按钮上的文本 textarea 表示多行文本输入框 seleccted="selected" row属性 设置可以显示几行的高度 cols属性设置每行可以显示几个字符宽度 button 按钮 file 文件上传域 hidden 隐藏域, 当要发送的信息不需要用户看见可以使用隐藏域 其他 为了美观, 表单信息一般放在表格里 表单提交 属性 action 设置提交的服务器地址 method 设置提交的方式GET(默认值)或post 创建表单 表单提交时, 数据没有发送给服务器的三种情况 1.表单项没有name属性值 2.单选, 复选(下拉列表中的option标签 )都需要添加value值发送给服务器 3.表单项不在提交的form标签中 GET请求的特点 1.action属性[+?+请求参数] 请求参数格式 : name=value&name=value 2.不安全 3.有数据长度的限制(每个浏览器都不同) POST请求特点 1.地址中只有action属性值 2.相对于GET请求要安全 3.理论上没有数据长度限制 例 div标签 默认会在段落上方或下方各空出一行来, 如果已有就不再空 span(跨度, 范围), 长度是封装数据的长度 div span