一.文档结构

<!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. 区别JS中类的静态方法，静态变量，实例方法，实例变量

    1.类的静态方法 先来段代码之后分析 // JS类静态函数 function BaseClass() { } // 类添加add函数 BaseClass.add = function() { cons ...

  2. 16. 3Sum Closest(双指针)

    Given an array nums of n integers and an integer target, find three integers in nums such that the s ...

  3. STL之Deque容器

    1.Deque容器 1)deque是“double-ended queue”的缩写,和vector一样都是STL的容器,deque是双端数组,而vector是单端的. 2)deque在接口上和vect ...

  4. hdu4670 树分治

    这题说的给了一颗树 然后树上有一些整数值,分别由他给的那30个素数组成,有多少条路径的路径上的点的乘积为立方数, 把每个数分解成相应的素数模3后的值,然后压缩为一个3进制的数 然后进行树的分支 #in ...

  5. sitecore系列教程之营销人员和技术人员如何策划与消费者的对话以提升体验？

    “每次良好的交谈都要从良好的倾听开始.” - 未知 你是如何听取网站访问者的?你是在倾听还是只是回复? 拥有内容管理系统只是良好网站战略的一个要素.毕竟,内容必须是动态的,及时的和相关的. 当网站访问 ...

  6. Mysql Federated For Windows

    [1]windows环境下打开federated (1)关闭.命令:mysql> net stop mysql (2)添加federated字段.在my.ini文件中添加一个字段,注意位于[my ...

  7. 解决 samba 服务器 windows 多重连接

    samba连接,用户名密码均正确.失败提示:不允许一个用户使用一个以上用户名与一个服务器或共享资源的多重连接. 事实上,这个不是samba的限制.是Windows的限制. 在打开存在public ＝ ...

  8. react修改app.js添加中文内容后中文部分乱码解决

    [问题]:配置完react后修改app.js内容时添加中文出现如下乱码的中文. [A解决]文档——文本编码——转换文本编码,在弹出窗口修改,确定,搞定 [B解决]首先在EditPlus内:工具——首选 ...

  9. mongoDB的使用A

    一.[连接mongo服务].[连接数据库].[连接集合] #一.[连接Mongo] import pymongo #方法一 client = pymongo.MongoClient(host='loc ...

  10. 转：【专题九】实现类似QQ的即时通信程序

    引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例来让大家更好的理解它们的工作原理以及怎样.Net类库去实现它们的.为了让大家更好的理解我们平常中常见的软件QQ的工作原理,所以在 ...