@()

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. asp.net ToString() 格式化字符串

    c# ToString() 格式化字符串  格式化数值:有时,我们可能需要将数值以一定的格式来呈现,就需要对数值进行格式化.我们使用格式字符串指定格式.格式字符串采用以下形式:Axx,其中 A 为格式 ...

  2. How to create my own self signed certificate chain?

    --Refer to https://superuser.com/questions/126121/how-to-create-my-own-certificate-chain for detail. ...

  3. QTableWidget和 QTableView翻页效果（准确计算Scroll，然后使用setSliderPosition函数）

    以QTableView举例,QTableWidget使用相同   int CQTTableViewPageSwitch::pageCount(QTableView *p)//QTableView 总页 ...

  4. 梅林路由器 开启ssh key远程登录

    转载自 开启SSH KEY在手机远程登陆路由 http://koolshare.cn/thread-67565-1-1.html (出处: KoolShare) 首先修改路由的登录名和密码 下载put ...

  5. 学习Java，容易被你忽略的小细节（2）

    昨天心情真的太糟糕了,写完<学习Java,值得注意你注意的问题(1)>之后,迎来些许的支持以后就是一片片的谴责.我的主页上涌现出许许多多Java方面的牛人,谴责我水平太低,写的问题太初级. ...

  6. Spark学习之路（十五）—— Spark Streaming 整合 Flume

    一.简介 Apache Flume是一个分布式,高可用的数据收集系统,可以从不同的数据源收集数据,经过聚合后发送到分布式计算框架或者存储系统中.Spark Straming提供了以下两种方式用于Flu ...

  7. web页面加载速度缓慢，如何优化？

    参考博客: https://www.cnblogs.com/xp796/p/5236945.html https://www.cnblogs.com/MarcoHan/p/5295398.html - ...

  8. js 数组去重方法

    var arr = ['a',1,2,3,'a',4,2,3,1,4,2,8,10,null,'a']; // 方法一 var newArr = [...new Set(arr)]; console. ...

  9. 计算广告之CTR预测--PNN模型

    论文为:Product-based Neural Networks for User Response Prediction 1.原理 给大家举例一个直观的场景:比如现在有一个凤凰网站,网站上面有一个 ...

  10. Spring Framework 组件注册 之 FactoryBean

    Spring Framework 组件注册 之 FactoryBean 前言 前两篇文章介绍了如何使用@Component,@Import注解来向spring容器中注册组件(javaBean),本文将 ...