Web前端基础(1)HTML基础知识

HTML基础知识

HTML开发基础知识

HTML是HyperTextMarkupLanguage,超文本标记语言的缩写。是一种标记语意的文档格式。

任何纯文本编辑器都能够编辑html,比如记事本,editplus,notepad++

比较有名的专门制作网页工具

  • DreamWeaver (Adobe公司的产品,过时了,不是一个好的代码编辑器)
  • Sublime (高效率的程序书写工具)
  • WebStorm (更高级的项目级别编程工具)

Sublime

sublime的中文意思是“华丽的”,是2011年开始流行的代码编辑器,可以编辑java, c, php等很多语言, html, css, js在sublime中支持非常好

sublime中的常用快捷键

快捷键作用
ctrl + shift + d复制当前行
ctrl + 滚轮放大缩小文字
ctrl + shift + k删除当前行
ctrl + shift + 上箭头上移当前行
ctrl + shift + 下箭头下移当前行
ctrl + n新建文件

HTML语法

html骨架和基本语法特征

安装Emmet插件
参考连接:http://bubkoo.com/2014/01/04/emmet-a-toolkit-for-improving-html-css-workflow/

输入“html:xt”按Tab就会生成骨架

1
html:xt

Sublime自动生成html骨架

文档声明头

任何一个标准的HTML页面,第一行一定是一个以 <!DOCTYPE …… 开头的语句。(文档声明头)此标签告诉浏览器文档使用的是那种HTML或XHTML规范。

我们现在学习的是HTML4.01这个版本,这个版本是IE6开始兼容的。HTML5是IE9开始兼容的,但是IE 6,7,8这些浏览器还不能过早被淘汰,所以这几年网页还是该用HTML4.0.1来制作,移动端可以使用HTML5了。

HTML4.01里面有两大种规范,每大种规范里面又各有3种小规范。所以一共6种规范。
HTML4.01里面规定了普通,XHTML两大种规范。
HTML 觉得自己有一些规定不严谨,比如,标签是否可以用大写字母呢?

所以,HTML就觉得,把一些规范严格的标准又制订了一个XHTML1.0。在XHTML中的字母X表示”严格的“
HTML4.01规定了三种文档类型:Strict, Transitional以及Frameset.所以HTML第一行有6种写法。

大规范里面的小规范
HTML4.01Strict / Transitional / Frameset
XHTML1.0Strict / Transitional / Frameset
  • strict表示严格的,这种模式要求比较严格,比如标签:

    1
    <u>让文本加上下划线,和html本质有冲突,html只能负责语意</u>
  • transitional表示普通的

  • Frameset 带有框架的页面

我们学习的就是XHTML1.0中的transitional版本,因为我们的页面中偶尔要使用一些类似u这种标签。HTML5中极大的简化了DTD,也就是HTML5中没有XHTML了。

字符集

1
<meta http-equiv="Content-Type"  content="text/html;charset=UTF-8">

字符集用meta标签定义,meta表示”元“。”元“配置就是标识基本的配置项。

例如

1
2
<meta name="Keywords" content="网易,邮箱,游戏" />
<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />

html的基本语法特征

  • html对换行不敏感。
  • html中文字之间所有空格,换行,tab都将被折叠为一个空格显示。
  • 标签要严格封闭

列表

有序列表ol (一般没啥用)
无序列表ul
定义列表:dl表示 definition list , dt 表示 definition title, dd 表示 definition description 定义表述词。

1
2
3
4
5
6
<dl>
<dt>北京</dt>
<dd>国家首都,政治文化中心</dd>
<dt>上海</dt>
<dd>魔都,有外滩,东方明珠塔</dd>
</dl>


北京

国家首都,政治文化中心

上海

魔都,有外滩,东方明珠塔


表达的语义有两层:

  1. 是一个列表
  2. 每一个列表项都有描述

定义列表用法非常灵活,可以一个

配很多

div和span都是容器标签

div和span都是容器标签
div在浏览器中,默认是不会增加任何的效果改变的,但是语义变了,div中的所有元素是一个小区域。
div表情是一个容器级标签,里面什么都能放,甚至可以放div自己

span也是表达”小区域,小跨度“的标签,但是是一个”文本级“的标签,也就是说span里面不能放p, h, ul, dl, ol, div
span里面是放置小元素的,div里面放置大东西的

所以,我们亲切的称呼这种模式叫做”div+css”, div标签负责布局,负责结构,负责分块。css负责样式。

表单

表单就是收集用户信息的,就是让用户填写,选择的

下拉列表

1
2
3
4
<select>
<option>北京</option>
<option>上海</option>
</select>

多行文本框(文本域)

1
<textarea cols="30" rows="10"></textarea>

三种按钮

  • 普通按钮
    1
    <input type="button" value="button上面显示的字">
  • 提交按钮
    1
    <input type="submit" value="默认有提交两个字">
  • 重置按钮
    1
    <input type="reset" value="重置按钮">

label 标签

1
2
<input type="radio" name="sex" id="nan"/> <label for="nan"></label>
<input type="radio" name="sex" id="nv"/> <label for="nv"></label>

label就是为了绑定某个标签(点击“男”这个字就可以选定单选框)
input元素要有一个id,然后label标签就有一个for属性,for的值和id值相同就可以绑定。

html废弃的标签

html中废弃了带有样式作用的标签,html本身不应该具有样式。

1
2
3
4
5
6
7
8
<h1>html中废弃的标签(这些标签有样式作用)</h1>
<font size="9" color="red">haha</font>
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<del>删除线</del>
<hr/><!-- 水平线 -->
<br/><!-- 不另起一个段落换行,一般换行都是另起段落,所以用p代替 -->

评论

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw, 直方图 Chrome Class ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Error Exception Extensions File FileProvider Flow Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Style Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Vue.js Web Web前端 Workbench api apk bookmark by关键字 cli compileOnly computed css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge methods mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode watch webpack 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指令 指针 插件 插值 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 渲染 源码 源码分析 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统,发行版, GNU 索引 组件 组合模式 绑定 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 脚手架 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×