HTML-入门篇day01

1、web
     C/S：Client Server
    客户端 服务器
    QQ,...
    B/S：Browser Server
    浏览器 服务器

PC机:Personal Computer 个人电脑

2、HTML
   2. 1、HTML:Hyper Text Markup Language
            超级 文本 标记 语言
            通过 带有 尖括号<>组成的标记将网页内容标识出来

用于设计网页的语言
            以.html或htm为后缀
            由浏览器解释执行
  开发工具:
     1、记事本等相关工具
          Editplus hubilder
    2、浏览器
         Chrome  火狐
3、HTML语法
    标记：一组用于描述HTML功能的符号<p></p>
   语法：标记必须用<>扩起来
    标记分为 封闭类型的，非封闭类型的
    <>内的东西 就是标记内容,不同的标记页面会有不同的显示效果
   <a>:超链接
    <b>:字体加粗显示

1、封闭类型的标记
         也称为双标记：必须成对出现
        <标记> 内容 </标记>
        <b>这是一个b标记</b>
    2、非封闭标记
       称为 空标记、单标记
      <标记>或<标记/>
     空标记一般用于表示特殊效果
    <br> : 换行
     <hr> : 一条水平线
    <img /> : 显示图片
   3、元素
      也称为标记
     <body></body>
      元素之间是可以产生嵌套的
a：超链接
img：图片
<a>
<img ... />
</a>
注意：标记的嵌套顺序
<p>
<a>超链接</a>
</p>
<p>
<a> fdsaf
</p>
</a>

4、元素的属性和值
   属性是用来修饰元素的
   语法：
 4.1、属性声明必须位于开始标记中
 <标记 属性声明位置></标记>
 <标记 属性声明位置/>
 4.2、一个元素允许出现多个属性，多个属性用空格区分.第一个属性也要与标记用空格来区分
  <标记 属性1 属性2 属性3></标记>
 4.3、属性间排名不分先后
    属性值:
       1、属性与属性值之间用=连接
       2、属性值尽量放在一对引号中' ' " "
    <p align='center' id="p1">段落一</p>
   属性：align
   值：center
   align='center'
   增加一个属性 名称为 id，值为p1

标准属性：
    又称通用属性，所有的html标记都会具备的属性
   id:定义元素在页面中的唯一标识
   title:鼠标移入到当前元素时，所提示的文本
   class:引用的样式的类名称
  style:定义行内样式
5、注释
      html的注释内容是不会被浏览器所解析显示的。
   语法：
   <!--
   注释内容
   是不会被浏览器解析的
   但是可以给其他人员查看
     -->

3、文本相关标记
1、文本标记的作用
不同的文本标记会文本有不同的显示效果
2、特殊字符
&nbsp; :一个空格
&gt; > greater than
&lt; < less than
&copy; ©

3、文本相关标记
1、文本标记的作用
不同的文本标记会文本有不同的显示效果
2、特殊字符
&nbsp; :一个空格
&gt; > greater than
&lt; < less than
&copy; ©
3、文本相关的标记
1、文本样式
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<sup></sup>上标
<sub></sub>下标
2、标题元素
<hn></hn>
n:1-6之间的数字
<h1></h1>一级标题 ，字最大
<h6></h6>六级标题，字最小
3、段落元素
<p></p>
4、换行元素
<br>
<br />
5、分区元素
1、行分区
<span></span>
主要作用是包裹文本，做文本的样式
2、块分区
<div></div>
div的主要工作，就是布局
没有显示效果，主要用于页面的布局或分组
6、行内元素和块级元素
1、行内元素可以同其他的行内元素在一行内显示
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<s></s> 删除线
<sup></sup>上标
<sub></sub>下标
<span></span>

特点：修改文本样式
2、块级元素
默认情况，块级元素独占一行，前后会自动换行
<div></div>
<hn></hn>
<p></p>

特点：主要场合是在 布局上
注意：
1、所有的行内元素不允许嵌套块级元素
<span>
<h1></h1>
</span>
2、块级元素中可以嵌套所有的行内元素
p标记是不允许嵌套其他块级元素
div：允许嵌套所有的元素
div没有特殊情况是不允许被其他元素嵌套的
div 能嵌套div
td 能嵌套div
li 能嵌套div
dt,dd 能嵌套div
7、分割线元素
<hr>
属性：size 尺寸
width 宽度
align 水平对齐方式
color 颜色

8、预格式化
保留源文档的格式，即保留文档中出现的空格和回车
<pre></pre>

<p><a>内容</a></p>
<p>
<a>
<b>内容</b>
</a>
</p>

Tab
<pre>
<p>
<a>
<img />
</a>
</p>
</pre>

HTML-入门篇day01的更多相关文章

  1. Membership三步曲之入门篇 - Membership基础示例

    Membership 三步曲之入门篇 - Membership基础示例 Membership三步曲之入门篇 -  Membership基础示例 Membership三步曲之进阶篇 -  深入剖析Pro ...

  2. spring boot(一)：入门篇

    构建微服务:Spring boot 入门篇 什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框 ...

  3. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  4. 一个App完成入门篇（七）- 完成发现页面

    第七章是入门篇的倒数第二篇文章了,明天整个APP将进入收官. 本节教程主要要教会大家使用二维码扫描和用do_WebView组件加在html页面. 导入项目 do_WebView组件 扫描功能 自定义事 ...

  5. [原创]Linq to xml增删改查Linq 入门篇：分分钟带你遨游Linq to xml的世界

    本文原始作者博客 http://www.cnblogs.com/toutou Linq 入门篇(一):分分钟带你遨游linq to xml的世界 本文原创来自博客园 请叫我头头哥的博客, 请尊重版权, ...

  6. 转：OSGi 入门篇：模块层

    OSGi 入门篇:模块层 1 什么是模块化 模块层是OSGi框架中最基础的一部分,其中Java的模块化特性在这一层得到了很好的实现.但是这种实现与Java本身现有的一些模块化特性又有明显的不同. 本文 ...

  7. 转：OSGi 入门篇：生命周期层

    OSGi 入门篇:生命周期层 前言 生命周期层在OSGi框架中属于模块层上面的一层,它的运作是建立在模块层的功能之上的.生命周期层一个主要的功能就是让你能够从外部管理应用或者建立能够自我管理的应用(或 ...

  8. 【three.js详解之一】入门篇

    [three.js详解之一]入门篇   开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的 ...

  9. [Maven]Apache Maven 入门篇

    作者:George Ma 上 写这个 maven 的入门篇是因为之前在一个开发者会的动手实验中发现挺多人对于 maven 不是那么了解,所以就有了这个想法.这个入门篇分上下两篇.本文着重动手,用 ma ...

  10. Unity3D大风暴之入门篇（海量教学视频版）

    智画互动开发团队 编   ISBN 978-7-121-22242-9 2014年2月出版 定价:79.00元 328页 16开 编辑推荐 长达800分钟的高清教学视频,手把手教会初学者 数个开发案例 ...

随机推荐

  1. int 和 Integer 的区别

    1.两个New生成的Integer 永远不相等,因为他们的内存地址不相等 2.如果一个是New生成的Integer 另一个是通过赋值生成的话,如果值相等那么他们相等,因为这时Integer会通过自动拆 ...

  2. 基础DP(初级版)

    本文主要内容为基础DP,内容来源为<算法导论>,总结不易,转载请注明出处. 后续会更新出kuanbin关于基础DP的题目...... 动态规划: 动态规划用于子问题重叠的情况,即不同的子问 ...

  3. 这篇说的是Unity Input 输入控制器

    关于Unity3D是什么.我就不多做解释了.由于工作原因,该系列原创教程不定期更新.每月必然有更新.谢谢各位 Unity Input---输入控制管理器: Edit->Project Setti ...

  4. Javascript 强制浏览器渲染Dom文档

    在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...

  5. [Java学习]集合

    一. Collection与Map继承结构图 Collection继承结构图 实现Collection接口的类只能存储引用类型!所以set.add(10)会有自动装箱的过程,把int 转成 Integ ...

  6. java实现rabbitMQ延时队列详解以及spring-rabbit整合教程

    在实际的业务中我们会遇见生产者产生的消息,不立即消费,而是延时一段时间在消费.RabbitMQ本身没有直接支持延迟队列功能,但是我们可以根据其特性Per-Queue Message TTL和 Dead ...

  7. JQuery UI之Autocomplete(1)入门程序

    1.Autocomplete的主要属性:source:即为指定智能提示下拉框中的数据来源,支持三种类型.  Array,主要用于本地化数据提供,支持两种格式:字符串数组 [ "Choice1 ...

  8. Xshell无法使用root远程登录Ubuntu16服务器

    修改/etc/ssh/sshd_config文件,把PermitRootLogin Prohibit-password 添加#注释掉 新添加:PermitRootLogin yes 2. 重启ssh服 ...

  9. avalon 双向绑定在新版chrome中不能同步中文输入

    1>1.x和2.x都有这样的问题,输入中文无法同步到VM,演示地址 http://codepen.io/roscoe054/pen/XXKYMj?editors=1111 chrome 版本 5 ...

  10. echarts柱状图图例不显示的问题

    如果想要图例有效果,legend中数据要和series中name的值保持一致,切记切记,这是我曾经遇到的坑,不保持一致是没有效果的