@()

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. Delphi检测用户是否具有administrator权限（OpenThreadToken，OpenProcessToken，GetTokenInformation，AllocateAndInitializeSid和EqualSid）

    检测用户是否具有administrator权限const SECURITY_NT_AUTHORITY: TSIDIdentifierAuthority = (Value: (0, 0, 0, 0, 0 ...

  2. layer 1.9.2 发布，国产 Web 弹层不懈的前行者

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

  3. Qt 设置背景图片3种方法（三种方法：QPalette调色板，paintEvent，QSS）

    方法1. setStylSheet{"QDialog{background-image:url()"}}  //使用styleSheet 这种方法的好处是继承它的dialog都会自 ...

  4. 一个拼图工具TImageBox的制作思路

    http://www.cnblogs.com/del/archive/2010/04/24/1719631.html

  5. CI控制器

    当控制器要继承自定义的控制器的时候,有特定的定义: application/core/MY_Controller <?php class MY_Controller extends CI_Con ...

  6. Salesforce LWC学习(二) helloWorld程序在VSCode中的实现

    上一篇我们简单的描述了一下Salesforce DX的配置以及CLI的简单功能使用,此篇主要简单描述一下LWC如何实现helloWorld以及LWC开发时应该注意的一些规范. 做国内项目的同学直观的感 ...

  7. Java学习笔记——设计模式之十.观察者模式

     观察者模式(Observer),定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使他们能够自动更新自己. Subject类: ...

  8. 大流量下的 ElasticSearch 搜索演进

    这是泥瓦匠(bysocket.com)的第27篇精华分享 ES (ElasticSearch)是分布式搜索引擎.引擎太晦涩,其实类似一个 MySQL ,一个存储.方便提供下面功能: 近实时搜索 全文检 ...

  9. Spring5深度源码分析(三)之AnnotationConfigApplicationContext启动原理分析

    代码地址:https://github.com/showkawa/spring-annotation/tree/master/src/main/java/com/brian AnnotationCon ...

  10. 每天学点node系列-http

    任何可以使用JavaScript来编写的应用,最终会由JavaScript编写.--Atwood's Law http模块概览 http模块主要用于创建http server服务,并且 支持更多特性 ...