@()

what is html

(hypertext marked language)超文本标记语言，负责页面文本、图片内容的编辑排布；
特点:
1. 使用的是一对一对的标签组成
  双标签可嵌套其他的标签；单标签或不可嵌套其他标签；
2. 标签之间可以相互嵌套，但不可以交叉嵌套
3. 若是有多个相同的标签，可使用id或name属性去区分
```
 <tag1 id="20130705" name="a"></tag1>
 <tag1 id="20140603" name="b"></tag1>
```
  重点:HTML的核心在与标签的使用、标签属性的使用

html基本格式

网页的每个界面都是一个独立的HTML文件：

 <!---基本格式----->
 <html>
  <!---页面 start----->
     <head>
         <!---头部 start----->
         <title>这里写网页页面的标头</title>
         <!---头部 end----->
     </head>
     <body>
         书写内容的地方
     </body> <!---主体 start----->
     <!---页面 end----->
 </html>

html常用标签及其属性

文本修饰

<font> 属性
size 字体大小最大值是7
color 字体颜色用单词表示 "red" "green" "blue" RGB表示rgb(0,0,255) 十六进制表示#0000ff
face 字体类型黑体、楷体、宋体、华文彩云等必须浏览器支持
字符实体
含义：就是讲一些特殊含义符号例如空格(&nbsp)、引号(")等显示在html中，在编写时可以键入实体名或者实体编号来表示，但是在有些浏览器不支持某个字符实体的实体名但是编号时所有都支持的，所以建议都是用实体编号；
字符实体查阅
<br> 换行标签，达到换行的目的，一个<br>但标签就是往下一行；

段落修饰

<p> 段落标签使元素成块可以内嵌其他标签来修饰段落内文本的显示效果；
align 对其属性 left 左对齐 center居中对其 right右对齐

标题修饰

<h1> 标题标签使元素成块可以使h1 - h6 共六个标题标题依次变小 h1标签建议只在页面中出现一次，多次出现不利于搜索引擎的识别；
align 对其属性
它和段落一样没有color样式，如需修改文本样式可以嵌套其他标签实现
<hr> 水平分隔线
有color颜色
size高度
width宽度
align对其

序列修饰

特点：块元素，独立成行有行间距会自动缩进；
无序序列

<ol>
      <li></li>
       <li></li>
</ol>

有序序列

<ul>
    <li></li>
    <li></li>
</ul>

在序列里 <ol>标签表示无序序列<ul>标签表示有序序列<li>则表示序列元素，有几个<li>标签就表示有几个标签元素，而<ol>和<ul>则用来区分这些序列元素的类型，序列类型可以相互嵌套但是会再次缩进；
<ol>属性：type 1、a 、A 、i、 I
<ul>属性：type
start 起始数
<li>属性：type disc(实心圆) 、circle(空心圆) 、square(实心方块)

图片

<img>

alt 图片丢失显示内容
src 图片源
width 图片宽度
height 图片高度
border 图片边框

音频

<bgsound>

注：只对IE有效果
src=""

<embed>

src=""
width
hight

视频

<embed>

支持mp3、mp4
src ="" 文件路径
width 宽度
height 高度

字体其他样式

加粗 b 斜体 i 下划线 u

<b>加粗内容</b>
<i>斜体内容</i>
<u>下划线内容</u>

超级文本

<a>

属性:
href 资源的路径地址
target 是否在新页中打开，默认是在当前页打开，target="_blank"则在新页中打开，target="_self" 或者"_top"当前页打开;
执行效果:
1.跳转到本地或者网络的资源地址;
url 网络资源

<a href ="www.baidu.com">

path 本地资源

<a href ="luomit.txt">

2.调动本地邮件客户端进行发送邮件

<a href="mailto:14125@qq.com">发送信息到14125@qq.com邮箱\</a>

3.调用JavaScript脚本文件

 <a href="javascript:alert("你点我干哈啊！")">调用JavaScript脚本\<a>

4.设置锚点(书签) 设置书签跳转的功能

表格

<table>

width 表格宽
height 表格高
cellspcing 单元格间距
cellpading 内容与单元格边框的距离
align 对齐 left center right
brckground 背景图片
bgcolor 背景颜色

<tr>行</tr>
<td>列</td>

align 对齐(水平) left center right
valign 对齐(垂直) left center right middel top bottom
brckground 背景图片
bgcolor 背景颜色

<th></th>

th = td +居中+加粗
单元格的合并
行合并 rowspan <td rowspan="2">10</td> 这就把当前单元格和下一列的并列一个单元格合并
列合并 colsoan

<caption>表格的标头</caption>

写在表格开始处

前端三剑客之HTML的更多相关文章

前端三剑客之javascript
前端三剑客之javascript 给个小目录一.JavaScript介绍二.ECMAScript(核心) 三.BOM对象(浏览器对象) 四.DOM对象(文档对象模型) 总结: JS的组成: a ...
【前端优化之拆分CSS】前端三剑客的分分合合
几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试&l ...
前端三剑客:html,css,JavaScript
一.前端概念二.html详细介绍三.css基础四.css盒模型五.css高级布局六.JS基础七.JS常用类八.JS基础操作九.JS高级与事件十.BOM与DOM 十一.jQuery初识 ...
前端三剑客之-html
web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind ...
带你快速上手前端三剑客之css
CSS介绍 CSS(Cascading Style Sheet , 层叠样式表)定义如何显示HTML元素.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染) 组成每个CS ...
Python 44 前端概述、三剑客、常用标签与分类
1.前端三剑客是哪三位?文件的后缀内容?在前端开发中的功能是什么? HTML: .htm .html 内容 CSS: .css 效果 JS: .js 行为 2.简述三剑客的主要 ...
【移动前端开发实践】从无到有（统计、请求、MVC、模块化）H5开发须知
前言不知不觉来百度已有半年之久,这半年是996的半年,是孤军奋战的半年,是跌跌撞撞的半年,一个字:真的是累死人啦! 我所进入的团队相当于公司内部创业团队,人员基本全部是新招的,最初开发时连数据库都没 ...
前端开发之JavaScript篇
一.JavaScript介绍前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...
当代前端应该怎么写这个hello world？
前言大概16年的时候我们队react进行了简单的学习:从DOM操作看Vue&React的前端组件化,顺带补齐React的demo,当时我们只是站在框架角度在学习,随着近几年前端的变化,想写个 ...

随机推荐

Delphi移动开发笔记（一）
Delphi从XE4版本就开始支持移动开发了,但是笔者最近才开始学习这块内容.因为笔者原来一直使用的是Delphi7,对于很多新语法没有了解过,所以把其中一些东西记录下来. 程序开发,调 ...
<%@ Application Codebehind="Global.asax.cs" Inherits="XXX.MvcApplication" Language="C#" %>
<%@ Application Codebehind="Global.asax.cs" Inherits="XXX.MvcApplication" Lan ...
分布式存储系统GlusterFS初体验
摘要: GlusterFS是Scale-Out存储解决方案Gluster的核心,它是一个开源的分布式文件系统,具有强大的横向扩展能力,通过扩展能够支持数PB存储容量和处理数千客户端.GlusterFS ...
做个知识回顾目录，打算每日更新一下ios的基础知识
一.基础技能列表: 01 面向对象特性类与方法封装通过继承扩展类抽象类与方法覆盖多态.动态类型和动态绑定分类和协议 ...
SQL基础复习1
一.概述 SQL语言组成:DDL,DCL,DML 二.数据定义 1.模式定义(Schema) Schema这个东西一直感觉不大明白,一直以为就是对表的字段定义则被称为Schema,在复习数据库理论中才 ...
Java基础(五) final关键字浅析
前面在讲解String时提到了final关键字,本文将对final关键字进行解析. static和final是两个我们必须掌握的关键字.不同于其他关键字,他们都有多种用法,而且在一定环境下使用,可以提 ...
linux下安装Nginx1.16.0
因为最近在倒腾linux,想安装新版本的nginx,找了一圈教程没有找到对应的教程,在稍微倒腾了一会之后终于成功的安装了最新版. 服务器环境为centos,接下来是详细步骤: 安装必要依赖插件 yum ...
appium入门篇之desired capabilities（2）
目录 1.appium工作原理 desired capabilities 2.准备工作 3.第一个appium脚本获取包名和启动的activity 编写脚本运行结果 1.appium工作原理启动 ...
JIRA的安装部署问题
JIRA的安装部署问题: 因电脑上装了两人系统,导致我的JIRA服务不能和tomcat同时启动,让我弄了好久都不知道是啥原因,经过请教,总算得出原来是JIRA的Port和Tomcat的Port冲突.在 ...
CSS3 - vue中纯css实现柱状图表效果
背景以前我们制作柱状图都用echarts或者其他同类型的图表插件这次是个移动端的需求,而且这个图表需要动画使用echarts就会显得过重,而且动画达不到我想要的效果(主要是我自己愚蠢想不到好的动 ...

前端三剑客之HTML