@()

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的更多相关文章

  1. 前端三剑客之javascript

    前端三剑客之javascript 给个小目录  一.JavaScript介绍  二.ECMAScript(核心) 三.BOM对象(浏览器对象) 四.DOM对象(文档对象模型) 总结: JS的组成: a ...

  2. 【前端优化之拆分CSS】前端三剑客的分分合合

    几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试&l ...

  3. 前端三剑客:html,css,JavaScript

    一.前端概念 二.html详细介绍 三.css基础 四.css盒模型 五.css高级布局 六.JS基础 七.JS常用类 八.JS基础操作 九.JS高级与事件 十.BOM与DOM 十一.jQuery初识 ...

  4. 前端三剑客之-html

    web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind ...

  5. 带你快速上手前端三剑客之css

    CSS介绍 ​ CSS(Cascading Style Sheet , 层叠样式表)定义如何显示HTML元素.当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染) 组成 ​ 每个CS ...

  6. Python 44 前端概述 、三剑客 、常用标签与分类

    1.前端三剑客是哪三位?文件的后缀内容?在前端开发中的功能是什么? HTML:   .htm .html   内容 CSS:   .css   效果 JS:   .js   行为 2.简述三剑客的主要 ...

  7. 【移动前端开发实践】从无到有（统计、请求、MVC、模块化）H5开发须知

    前言 不知不觉来百度已有半年之久,这半年是996的半年,是孤军奋战的半年,是跌跌撞撞的半年,一个字:真的是累死人啦! 我所进入的团队相当于公司内部创业团队,人员基本全部是新招的,最初开发时连数据库都没 ...

  8. 前端开发之JavaScript篇

    一.JavaScript介绍  前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本, ...

  9. 当代前端应该怎么写这个hello world？

    前言 大概16年的时候我们队react进行了简单的学习:从DOM操作看Vue&React的前端组件化,顺带补齐React的demo,当时我们只是站在框架角度在学习,随着近几年前端的变化,想写个 ...

随机推荐

  1. 关于DDD领域驱动设计的理论知识收集汇总

    原文:关于DDD领域驱动设计的理论知识收集汇总 最近一直在学习领域驱动设计(DDD)的理论知识,从网上搜集了一些个人认为比较有价值的东西,贴出来和大家分享一下: 我一直觉得不要盲目相信权威,比如不能一 ...

  2. win32内存调用图

    https://msdn.microsoft.com/en-us/library/ms810603.aspxhttps://www.codeproject.com/Articles/14525/Hea ...

  3. Windows下获取逻辑cpu数量和cpu核数量

    代码可在Windows NT下正常运行 具体API说明请参照如下文档: GetLogicalProcessorInformation 点击打开链接 点击打开链接 点击打开链接 typedef BOOL ...

  4. 将QT开发的界面程序封装成DLL，在VC中成功调用（必须有消息循环，所以使用了QTWinmigrate，附CSDN可下载的Demo）

    最近手头的一个项目需要做一个QT界面,并且封装成DLL,然后再动态调用DLL给出的接口函数,使封装在DLL内部的QT界面跑起来,在网上查了很多资料,今天终于成功了,经验不敢独享,因为CSDN给了我很多 ...

  5. 新玩法，CentOS7中LVM通过扩展逻辑卷扩展swap空间

    在我们日常运维工作中,偶尔也会遇到需要扩展swap空间的操作.扩展swap空间的方法很多,现在让我们一起来探讨一下,在LVM下扩展swap空间的方法. 1.查看一下卷组,是否还有空闲空间能用于扩展sw ...

  6. 【Linux】Linux下跟踪记录每个用户对主机服务器进行的操作

    linux中跟踪每个用户对主机的操作,看有人之前已经写过如此shell,可直接参考,参考如下: 1.记录操作信息 这个脚本需添加至/etc/profile 脚本如下: history USER_IP= ...

  7. Paragon NTFS for Mac 15.5.53 中文破解版（激活码）下载

    Paragon NTFS for Mac中文破解版是一款超级受欢迎的简单.高效.安全的格式读写软件,提供给大家,再也不用到处找Paragon NTFS序列号和Paragon NTFS激活码啦,帮您轻松 ...

  8. java多线程之管道流

    java语言中提供了各种各样的流供我们操纵数据,其中管道流(pipeStream)是一种特殊的流,用于在不同线程间直接传送数据. 一个线程发送数据到输出管道,另一个线程从输入管道读取数据,通过使用管道 ...

  9. 警惕SAP项目被“中间商赚差价”

    前段时间某买卖二手车的广告特别火,里面有一句话叫“没有中间商赚差价”特别有说服力.同样在做SAP项目的过程中也是要警惕各种“中间商”赚差价. 正常的SAP项目的都是甲方和乙方两边签署合同合作实施,并不 ...

  10. 实战Java的反射机制

    众所周知,Java要调用某个对象的方法首先需要对象实例化后才能调用. 而实例化对象常见的就是new执行和spring(DI)的依赖注入了. Spring的DI其实就是以反射作为最基础的技术手段. 一. ...