一.文档结构

<!DOCTYPE html>

<html lang="zh-CN">   #这个lang表示语言，zh-CN是中文的意思，
　　　　　　　　　　　　　　　　　　如果以英文为主，就写成lang='en'

<head>

  <meta charset="UTF-8">

  <title>css样式优先级</title>

</head>

<body> 

</body>

</html>

二.内标签（<head>）

　　<meta> 标签

　　① http-equiv  属性

<!--2秒后跳转到对应的网址，注意引号-->

a. <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> 
#如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行

<!--指定文档的编码类型-->

b. <meta http-equiv="content-Type" charset=UTF8">

<!--告诉IE以最高级模式渲染文档-->

c. <meta http-equiv="x-ua-compatible" content="IE=edge"> 
#edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦

　　②name属性

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

#关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，
搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的

<meta name="description" content="xxxxxpythonxxx学习">  
#是对这个文档的描述，在百度一些内容的页面上，f12打开看看

三.内容标签

　　1.基本标签

不加标签的纯文字也是可以在body中写的

<b>加粗</b>

<i>斜体</i>

<u>下划线</u>

<s>删除</s>

<p>段落标签</p> #独占一个段落

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

<!--换行-->

<br>

<!--水平线-->

<hr> #就是单独个一个水平线

　　2.特殊 字符

　　空格  ：  &nbsp;　

　　>      :      &gt;

　　<      :      &lt;

　　&      :     &amp;

　　￥     :     &yen;

　　© (版权标识） ：&copy;

　　® (注册）       ： &reg;

　　3.  块级标签和内联标签

　　块级标签（独占一行）：div  p   h1-h6  hr

　　内联标签 （不换行） ：b   i    u    s  span

　　4.其他标签

　　①   img 标签

<img src="图片的路径" alt="图片未加载成功时的提示" 
title="鼠标悬浮时提示信息" width="宽" height="高
(宽高两个属性只用一个会自动等比缩放)">

　　②  a  标签 （超链接标签）

　　a. href 属性

1.绝对URL - 指向另一个站点（比如 href="http://www.jd.com）

2.相对URL - 指当前站点中确切的路径（href="index.htm"） #学django的时候会用的比较多

3.锚URL - 指向页面中的锚（href="#top"），博客的目录经常用到，
还可以跳转到 name属性为p1的a标签上，<a name='top'>xxx</a>

　　b. target  属性

1. _blank表示在新标签页中打开目标网页

2. _self表示在当前标签页中打开目标网页

　　③ 列表

　　a. 无序列表

type属性：

disc（实心圆点，默认值）

circle（空心圆圈）

square（实心方块）

none（无样式）

　　b.有序列表

type属性： start是从数字几开始

1 数字列表，默认值

A 大写字母

a 小写字母

Ⅰ大写罗马

ⅰ小写罗马

　　c.标题列表

（像大纲一样，有一个层级效果）

　　④ 表格

<table border=''>

  <thead> #标题部分

  <tr> #一行

    <th>序号</th> #一个单元格

    <th>姓名</th>

    <th>爱好</th>

  </tr>

  </thead>

  <tbody> #内容部分

  <tr> #一行

    <td>1</td> #一个单元格

    <td>Egon</td>

    <td>杠娘</td>

  </tr>

  <tr>

    <td>2</td>

    <td>Yuan</td>

    <td>日天</td>

  </tr>

  </tbody>

</table>
　　属性:

border: 表格边框.

cellpadding: 内边距 （内边框和内容的距离）

cellspacing: 外边距.（内外边框的距离）

width: 像素 百分比.（最好通过css来设置长宽）

rowspan: 单元格竖跨多少行

colspan: 单元格横跨多少列（即合并单元格）

tfoot(表尾）

　　⑤ input 标签

　　⑥ select 标签

<form action="" method="post">

  <select name="city" id="city">

    <option value="">北京</option>

    <option selected="selected" value="">上海</option>

     #默认选中，当属性和值相同时，可以简写一个selected就行了

    <option value="">广州</option>

    <option value="">深圳</option>

  </select>

</form>

　　⑦ textarea标签     多行文本

　　⑧ label 标签

　　⑨ form 标签

　

前端 --- 1 HTML的更多相关文章

  1. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  2. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 总结：Mac前端开发环境的搭建（配置）

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

  5. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  6. Fis3的前端工程化之路[三大特性篇之内容嵌入]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  7. Fis3的前端模块化之路[基础篇]

    Fis3版本:v3.4.22 fis3是一个构建工具 解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题. 安装 npm install -g fis3 运行 fis3 ...

  8. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  9. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  10. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

随机推荐

  1. apc

    转载(https://www.kancloud.cn/thinkphp/php-best-practices/40866) 使用 APC 在一个标准的 PHP 环境中,每次访问PHP脚本时,脚本都会被 ...

  2. [8]windows内核情景分析--窗口消息

    消息与钩子 众所周知,Windows系统是消息驱动的,现在我们就来看Windows的消息机制. 早期的Windows的窗口图形机制是在用户空间实现的,后来为了提高图形处理效率,将这部分移入内核空间,在 ...

  3. 《大话设计模式》c++实现 抽象工厂模式

    为了更清晰地理解工厂方法模式,需要先引入两个概念: 产品等级结构 :产品等级结构即产品的继承结构,如一个抽象类是电视机,其子类有海尔电视机.海信电视机.TCL电视机,则抽象电视机与具体品牌的电视机之间 ...

  4. 3.用Thead子类及Runnable接口类实现车站购票的一个场景(static关键字)

    如上图所示,我们这里模拟一下去车站买票的情形:这里有3个柜台同时售票,总共是1000张票,这三个柜台同时买票,但是只能一个柜台卖同一张票,也就是说1号票卖了之后我们就只能买2号票,2号票卖了之后我们只 ...

  5. uvalive 3415 Guardian Of Decency

    题意: 有一个老师想组织学生出去旅游,为了避免他们之间有情侣产生,他制定了一系列的条件,满足这些条件之一,那么这些人理论上就不会成为情侣: 身高相差40cm:性别相同:喜欢的音乐风格不同:最喜欢的运动 ...

  6. Java Redis JNI

    基本参考菜鸟教程,java下载直接安装,注意文件名和类名需要一致的问题: redis下载以后按菜鸟教程linux下安装,方式编译运行ok: Java使用redis按菜鸟教程下载.jar,保存在本地某个 ...

  7. 激活win10

    网盘地址 http://pan.baidu.com/s/1nvc5I1V 里面是2个东西,一个是rar解压缩软件,一个是激活工具本体 一个解压缩软件,一个激活工具的压缩包 安装解压软件,就是WINRA ...

  8. Firefox 功能笔记

    1.复制标签 说明:复制标签功能即新开一个与当前页一样的标签页,这个功能在Chrome中点击标签右键复制即可,但是在firefox中没有 Firefox中实现:Ctrl+拖动标签页

  9. linux下怎么删除名称带空格的文件

    linux下怎么删除名称带空格的文件-rm 'mysql bin.000005' 用引号把文件名括起来 某些情况下会出现名称带空格的文件, 如果想要删除的话,直接用rm mysql bin.00000 ...

  10. ElasticSearch相关文章推荐

    1. ElasticSearch查询:http://www.cnblogs.com/ljhdo/p/4486978.html 2. Elasticsearch Java API 的使用—多条件查询:h ...