一.文档结构

<!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. python3学习笔记之安装

    一.Python安装 1.下载地址:  https://www.python.org/downloads/release/python-365/ 2. Linux系统自带Python2.7,如需安装3 ...

  2. C# dataGridView 如何选中整行？

    this.dataGridView1.SelectionMode =DataGridViewSelectionMode.FullRowSelect; dataGridView1即你的dataGridV ...

  3. C语言---选择结构和循环结构

    C语言的两种选择语句,1) if语句; 2) switch语句; 在if判断语句中,一般使用关系表达式. 关系运算符: <.<=.>.>=.==.!= 关系表达式:用关系运算符 ...

  4. VS2010 发布网站时文件丢失解决办法

    网站项目中包含了一写rdlc的东西,发布网站选择仅限运行此应用程序所需文件,发布成功后发现这两个文件夹都没发布出来,找了下原因,解决办法是选择文件打开属性窗口找到生成操作,选项选择“内容”,重新发布, ...

  5. loadrunner 更新中......

    一.安装及参考说明 1.51 testing 链接:http://www.51testing.com/zhuanti/LoadRunner.html 2.官网链接:http://learnloadru ...

  6. wrapper class (Integer 为例)

    1,导入 Integer a = 100; Integer b = 100; Integer c = 150; Integer d = 150; a == b; true c == d; false ...

  7. jack welch：“你们知道了，但是我们做到了”

    一.我们发现,只要我们敢于相信自己,敢于朝着那些看似不可能的目标不懈努力,最终会如愿以偿,个人的领袖形象也将因此而确立. 二.一个领导者必须要有魄力.对我来说,这就是一个人能否领导一项业务的分水岭. ...

  8. MQ的使用场景

    一.消息队列概述消息队列中间件是分布式系统中重要的组件,主要解决应用解耦,异步消息,流量削锋等问题,实现高性能,高可用,可伸缩和最终一致性架构.目前使用较多的消息队列有ActiveMQ,RabbitM ...

  9. 将jar包制作成docker镜像

    将jar包制作成docker镜像1.准备可运行jar包2.建立Dockerfile文件 文件内容: FROM java:8VOLUME /tmpADD xxx-sendemail-0.0.1-SNAP ...

  10. node.js核心技术

    一.知识结构: http模块:配置简单 的web服务,npm/cnpm工具 express框架:express中间件进行服务配置:路由:请求处理: DB服务:学习使用mysql关系型数据库: web接 ...