@()

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. 毕设(五)ListView

    ListView 控件可使用四种不同视图显示项目.通过此控件,可将项目组成带有或不带有列标头的列,并显示伴随的图标和文本. 可使用 ListView 控件将称作 ListItem 对象的列表条目组织成 ...

  2. MeeGo 设备运行全部 Android 应用程序？

    啥是 OpenMobile ACL?它是一个应用程序兼容层(Application Compatibility Layer),能让 MeeGo 设备运行全部 Android 应用程序. 据 ACL 宣 ...

  3. VCL比MFC好在哪里

    作者:刘国华链接:https://www.zhihu.com/question/35218485/answer/118472021来源:知乎著作权归作者所有,转载请联系作者获得授权. 从使用感受而言, ...

  4. mysql自动安装教程说明

    这里只说明了思路和方法 我们在安装程序里面可能需要安装的时候将mysql一起安装,那么我们就按照下面的顺序思路来. 首先我们安装的电脑上可能已经安装了mysql,所以我们的mysql服务就起一个名字, ...

  5. 为什么你有10年经验，但成不了专家？（重复性刻意训练+反馈修正，练习的精髓是要持续地做自己做不好的，太精彩了）真正的高手都有很强的自学能力，老师和教练的最重要作用是提供即时的反馈（莫非我从小到大学习不好的原因在这里？没有单独刻意训练？） good

    也许简单看书就是没有刻意训练.更没有反馈,所以没有效果 我倒是想起自己,研究VCL源码的时候,都是自己给自己提问,然后苦思冥想.自己解决问题,然后Windows编程水平果然上了一个台阶.对什么叫做“框 ...

  6. Qt第三方圆形进度条-及其改进

    Qt第三方圆形进度条的改进 要实现一个圆形的进度条功能,在网上找到一个比较出名的第三方封装类:QRoundProgressBar,地址:sourceforge 的 QRoundProgressBar  ...

  7. Spring Cloud Stream整合RabbitMQ

    简介 Spring Cloud Stream是一个构建消息驱动微服务的框架,应用程序通过input(相当于consumer).output(相当于producer)来与Spring Cloud Str ...

  8. ABP开发框架前后端开发系列---（12）配置模块的管理

    一般来说,一个系统或多或少都会涉及到一些系统参数或者用户信息的配置,而ABP框架也提供了一套配置信息的管理模块,ABP框架的配置信息,必须提前定义好配置的各项内容,然后才能在系统中初始化或者通过接口查 ...

  9. 数据结构与算法---查找算法(Search Algorithm)

    查找算法介绍 在java中,我们常用的查找有四种: 顺序(线性)查找 二分查找/折半查找 插值查找 斐波那契查找 1)线性查找算法 示例: 有一个数列: {1,8, 10, 89, 1000, 123 ...

  10. Codeforces 776C：Molly's Chemicals（思维）

    http://codeforces.com/problemset/problem/776/C 题意:给出一个有n个数的序列,还有一个k,问在这个序列中有多少个子序列使得sum[l, r] = k^0, ...