一. HTML

点十成金
231 阅读6分钟

1.基础

1.1浏览器内核

  • IE的Trident三叉戟: IE 360 搜狗 百度 UC等 浏览器使用
  • Chrome和苹果的webkit : Safari 360 搜狗 移动端iOS和Android
  • Firefox 的Gecko 壁虎 : Firefox浏览器使用
  • Opera的Presto急板乐曲 ： 现在欧鹏浏览器用Blink
  • Chrome 的 Blink眨眼 ： Chrome和Opera浏览器使用

1.2对电脑的配置

  • 显示文件的扩展名
  • 显示隐藏的文件和文件夹
  • 显示文件的详情

1.3前端工程师的工作

  • 在自己的电脑上开发网站
  • 开发完的内容进行打包（gulp， webpack)
  • 上传部署到服务器

1.4网页的组成

  • HTML+CSS+JavaScript

1.5开发工具

  • Webstorm, VSCode, Hbuilder 等等

2.网页标签

2.1对HTML的认识

  • HTML: 超文本标记语言Hyper Text Markup Language, html由无数个标记组成( <标签></标签>, tag),它是一种标记语言.
  • <!DOCTYPE html>: 这句是声明, 告诉浏览器请使用HTML5的标准来解析这个页面
  • DTD: 文档类型的定义
  • 元素: 标签和内容共同组成的东西 叫元素( element )
    • 嵌套: 元素之间存在嵌套
    • 元素的关系: 父元素, 子元素, 后代元素, 祖先元素
    • 元素的属性: 共有属性 id, class, title
  • html提供了大量的标签,保证网页的丰富多样
    • 区块: div
    • 区分: span
    • 文本:p, h1~h6,em,dt,dd
    • 表格: table, tbody, thead, tr, td, th, tfoot, caption
    • 表单: form, input, label, textarea, select
    • 链接: a
    • 图片: img
    • 文档: html, head, title, body, meta ,link
    • 列表: ul, ol, li, dlside, footer, nav
    • 其他: br, hr, iframe <!--注释标签--> 条件注释<!--[if IE 8]>内容<![endif]-->
    • 结构: header, section, strong, pre, address, q, blockquote, code, sub,sup,kbd, var
    • 其中的单标签为: br, hr, link, meta

2.2基本元素

  • html标签
    • lang属性指定语言, 帮助翻译工具确定使用的翻译规则. 帮助语音合成工具确定要使用的发音
  • meta标签: 描述网页的各种信息,比如字符编码,网页标题,网页图标
  • title标签,div标签等等...
  • h标签: h1~h6 h元素有助于网站的SEO(Search Engine Optimization)优化
  • img标签:
    • src属性: 网络图片, 本地图片(相对路径/绝对路径)
    • alt属性: 图片加载失败时显示的文字
    • title属性: 鼠标悬停时的文字
    • width,height属性: 宽高
    • 图片格式: png, jpg, gif, webp
  • code标签: 包裹代码,里边的文字会设置为等宽字体
  • a标签:
    • target属性: _blank(新页面打开) 或者_self(本页打开)
    • name属性: 锚链接1, 锚链接2
    • href属性: 跳转到要浏览的页面, 或者跳到 href="#锚链接1" ,href="#锚链接2". href="#" 跳到页面顶部
    • <base href="www.333.com" target="_self"> 根路径的抽取,,也可以统一设置新标签页的打开方式
  • iframe标签: 网页里嵌套网页, 可以连接外部网站和内部网页
    • src: 网址路径
    • name属性: 给iframe添加标记
    • width,height: 宽高
    • frameboder: 边框
  • iframe中嵌套的页面 页面内的a标签:
    • target="_self", 会在iframe中打开
    • target="_blank"浏览器会在新标签页打开页面
    • target="_parent"会在盛放iframe的父页面打开
    • target="_top",会在父页面的父页面....最后一个父页面打开
    • target="name" 指定具体哪层父页面打开
  • 字符实体: &nbsp &lt &gt &quot &apos ......

2.3 H5新增的标签

  • 结构性标签: article, aside, footer, header, nav, section
  • 非结构性标签:audio, video, canvas, command, datalist, details, source, time, mark, progress

2.4URL

  • Uniform Resource Locator 统一资源定位符
  • URL基本格式=protocol://hostname/path:80 = 协议://主机地址/路径:端口
  • 协议: 不同的协议代表着不同的资源查找方式和资源传输方式
    • http协议,超文本传输协议
    • https协议,安全版的http
    • file协议,访问本地计算机协议 file:// (不用加主机地址)
    • mailto协议, 访问电子邮件地址, mailto:
    • ftp协议, 访问共享主机的文件资源, ftp://
  • 主机地址: 存放资源的主机IP
  • 路径: 资源在主机的具体位置

2.5列表

  • ul无序列表
    • type属性: crile,dics, square
    • ul标签内部若干个li标签
  • ol有序列表
    • type属性: 1 或 A/a 或 I/i
    • ol标签内部若干个li标签
  • dl自定义列表
    • dt标签 列表标题
    • dd标签 相当于li
  • 列表的CSS样式:
    • list-style: none url(图) inside
    • list-style-type: none
    • list-style-image: url()
    • list-style-position: outside或者 inside

2.6表格

  • 表格结构
    • table: caption thead tbody tfoot
    • caption: 表格名
    • thead: tr th 表格第一行
    • tbody: tr td 表格内容
    • tfoot: tr td 表格最后一行
  • 表格table的属性
    • rowspan合并行, colsapn合并列
    • align水平对齐
    • valign垂直对齐
    • border 边框粗细
    • cellpadding 内容到边框
    • cellspacing 单元格之间
  • 表格table的CSS样式:
    • caption-side: 标题位置
    • border-spacing: 单元格之间的距离
    • border-collapse: separate不合并线, collapse合并线
    • empty-cells:空边框是否隐藏 show hidden
    • table-layout: auto fixed

2.7表单

form标签

  • name = “值” 设定表单的名称
  • action = “值” 提交表单的URL
  • method = ”get/post” 提交方式
  • enctype =“值”规定发表单之前 先编码
  • target = “_black _self _parent _top” 何处打开表单
  • Autocomplete=“on off” 是否自动验证表单
  • novalidate=”novalidate” 不验证表单
  • accept-charset属性,设置提交的编码
  • enctype编码类型,不是字符编码(charset)
    • application/x-www-form-urlencoded: 表单采用的默认编码方式
    • multipart/form-data: 文件上传必须为这个值,method必为post
    • text/plain

input标签

  • placeholder属性, 默认显示的内容
  • value属性, 要提交的内容
  • name属性, input的名
  • maxlength属性,最大输入字数
  • readonly属性,只读 不能输入
  • disabled属性,禁用该输入框
  • checked属性,默认被选中,用于多选框 单选框
  • autofocus属性,默认聚焦
  • type属性, 文本框类型
    • type='text' 文本框
    • type='password' 密码框
    • type='radio' 单选框,name值要相同
    • type='checkbox' 复选框,name值要不同
    • type='button' 按钮
    • type='date' 日期
    • type='datetime' 时间
    • type='color' 颜色
    • type='email' 邮箱
    • type='tel' 电话
    • type='number' 数字
    • type=”file” 上传文件的域
      • <input type=”file”value=”选择单个文件”/>
      • <input type=”file”value=”选择多个文件”multiple=”multiple”/>
    • type=”image” 图像域<input type=”image”width=””height=”” border=”solid, 2,#000”src=””/>
    • type="reset"重置
    • type="submit"提交

label标签

  • <label for="male">男士</label>
  • <input type="radio"id='male'>男士</input>
  • 当点击文字时,也会聚焦

select和option标签

  • select标签下有若干个option标签
  • select标签: multiple属性,控制多选. size属性,显示的条数
  • option标签: selected 下拉菜单的该选项默认被选中

textarea标签,文本域

  • cols属性, 设置列数
  • rows属性, 设置行数
  • resize属性: none不可缩放, horizontal水平缩放,vertical竖直缩放

fieldset和legend标签

  • 把同一组的表单内容,放于fielset标签中,作为其子标签.
  • legend标签必须放在fieldset标签内部第一行,它是分组的组名

button标签

  • 实现按钮功能
  • 另一种是input标签 type="button"也能实现按钮功能
avatar
文章
阅读
粉丝