HTML初学笔记1

[TOC]

什么是HTML

HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词,比如 (<html>) HTML 标签通常是成对出现的,比如 (<b></b>) 标签对中的第一个标签是开始标签,第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签

HTML开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

这是一个HTML文本框架,下面我们来逐行分析 <html lang="en">中lang 属性规定元素内容的语言。lang常见情况如下

  • 简体中文页面:html lang="zh-cmn-Hans"
  • 繁体中文页面:html lang="zh-cmn-Hant"
  • 英语页面:html lang="en"

<meta charset="UTF-8">charset 属性规定 HTML 文档的字符编码。charset 属性是 HTML5 中的新属性,且替换了:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">仍然允许使用 http-equiv 属性来规定字符集,但是使用新方法可以减少代码量。

<meta name="viewport" content="width=device-width, initial-scale=1.0">是针对手机等用户做的一个设计。手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。

  • width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
  • height:和 width 相对应,指定高度。
  • initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。
  • maximum-scale:允许用户缩放到的最大比例。
  • minimum-scale:允许用户缩放到的最小比例。
  • user-scalable:用户是否可以手动缩放。

<meta http-equiv="X-UA-Compatible" content="ie=edge">X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,在html的<head>标签中使用。IE=edge是“以最高级别的可用模式显示内容”。

HTML 元素

HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签中进行关闭(以开始标签的结束而结束) 大多数 HTML 元素可拥有属性

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。 属性总是以名称/值对的形式出现,比如:name="value"。 属性总是在 HTML 元素的开始标签中规定。

HTML常用标签

  • <p></p>表示一个段落。块元素
  • <h1>~<h6>表示标题。块元素
  • <div>是没有任何意义的标记,但是,又是使用最多的标记。<div>一般要与CSS配合使用。块元素。 <span>是没有任何意义的标记,但是,又是使用最多的标记。<span>要与CSS配合使用。行内元素。

块元素 块元素,一般是单独占一行,不管内容多少,总是占一行。 块元素有哪些?div ul ol li dl dt dd h1 h2 h3 h4…p

行内元素 行内元素,不会单独占一行。 行内元素的宽度,主要是根据内容决定。 多个行内元素,会排在同一行。 行内元素有哪些?a b span img input select strong

  • 无序列表<ul><li></li></ul>
  • 有序列表<ol><li></li></ol>
  • 图片<img 属性 = “值”>
  • 链接<a href=""></a>
  • 表单
<table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
             <td></td>
         </tr>
</table>

HTML 样式

  1. 外部样式表 : 将样式规则直接写在.css文件中,然后再.html页面中通过<link>标签引入的方式
  2. 内部样式表 :(位于<head> 标签内部)
  3. 内联样式 :(在 HTML 元素内部)

HTML 注释

``

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴裕超

给新生成的节点(动态生成节点)绑定事件方法总结

第一种 jquery写法 $('.father').on('click',',child',function(){}) $(document).on('cli...

3496
来自专栏海说

13、Java菜单条、菜单、菜单项

13、Java菜单条、菜单、菜单项 一般用Java做界面时,都得牵涉到菜单条、菜单、菜单项的设计。菜单项放在菜单里,菜单放在菜单条里,且其字体均可设置。 13...

4530
来自专栏无原型不设计

[桌面版] 在 Mockplus 2.1 (预览版)中使用图片轮播

1、创建移动项目 2、从交互分类中添加一个图片轮播组件 3、点击图片轮播组件上小工具条上的图片选择按钮 4、选择一张或多张图片。(这里只会把对话框中勾选...

5478
来自专栏分享达人秀

屏幕宽高不够,滚动视图ScrollView来凑

前面几期学习了ProgressBar系列组件、ViewAnimator系列组件、Picker系列组件和时间日期系列组件,接下来几期继续来学习常见的其他组...

2086
来自专栏JavaEdge

CSS 全解析实战(二)-HTML基础强化1 HTML常见元素和理解(1)2 HTML常见元素和理解(2)3 HTML常见元素和理解(3)4 HTML版本5 元素分类6 嵌套关系

821
来自专栏自动化测试实战

HTML第三课——css【3】

29012
来自专栏自动化测试实战

html——css基础

上一节我们讲了display的inline-block属性,但是我们在工作中很少用,因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: le...

4865
来自专栏向治洪

html5标签基础

1.声明:<!DOCTYPE> HTML有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确的显示出HTML页面,这就是<!DOC...

1959
来自专栏九彩拼盘的叨叨叨

inline-block 布局写法示例

注意:如果元素之间如果没有空格,回车之类的,两端对齐会失效。如,用 Angular 的 ng-repeat 生成出来的元素之间就就没有空格。

1092
来自专栏smy

多行图片hover加边框兼容IE7+

问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 =========================================...

3486

扫码关注云+社区

领取腾讯云代金券