黑马程序员技术交流社区

标题: PHP培训之第一天HTML介绍 [打印本页]
作者: 刘辰老师    时间: 2017-6-14 14:09
标题: PHP培训之第一天HTML介绍
本帖最后由 刘辰老师 于 2017-6-14 14:15 编辑

html简介
  HyperText Markup Language
    超文本标记语言
        超文本
            能够表达更丰富的内容（相对于普通文本）
            标记：标识符号，就是html中的标签
       语言
           不是编程语言，就是html标签的描述
           浏览器来翻译html代码
   网页扩展名
         .html  .htm
[size=10.5000pt]
HTML文档结构
  HTML框架基本构架
       <html>
          <head>
          <title></title>
          </head>
          <body>
          </body>
     </html>
     解释：
          带<>的都叫标签
          html: 指明当前的文档的类型，是一个网页
          head是网页头部 包括网页的相关信息，基本设置，其中title网站的标题就在里面。
          body:在浏览器的看到的内容。
[size=10.5000pt]
html标签分类
         双标签 <font>HTML</font>,有开始标签和结束标签（标记）
        单标签 <br />

标签书写规范
        所有的标签都在< >中
        所有的标签都有开始和结束，即使是单标记也要结束
              <br /> 强制换行
              <img /> 图片标记
       所有的标签和属性及值小写
       标签和属性，属性与属性之间有空格
       属性值必须有加引号（单引号或双引号都可以）
       属性必须有值
       属性可写可不写
       标签与标签之间正确嵌套(标签不可交叉嵌套)

标签格式
       <开始标签 属性1＝”值1” 属性2＝”值2” 属性n＝”值n”>控制的内容</开始标签>(双标签格式)
       <开始标签 属性1＝”值1” 属性2＝”值2” 属性n＝”值n” 空格/>(单标签格式)
       <开始标签 空格/>(单标签格式)

html注释
      <!--注释内容-->
      注释的内容在html页面中是无法看到的，但是可以在页面源代码中发现
代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
  HTML注释
  <!--这段文字是看不见的-->
</body>
</html>

文本的修饰
    属性：
        Color(颜色):red,blue,green,yellow,gray,pink等
        Size(大小):值(1-7),默认值：3
         字体最大尺寸为7，若比7大，则默认为7。字体默认尺寸为3，当出现对尺寸的加减时，就是对3进行加减
代码实现：
<html>
<head>
  <title> new document </title>
</head>

<body>
        <font>我的第一个网页</font><br />
        <font color="green">我的第一个网页</font><br />
        <font color="green" size="7">我的第一个网页</font><br />
        <font color="green" size="70">我的第一个网页</font><br />
        <font color="green" size="+1">我的第一个网页</font><br />
        <font color="green" size="4">我的第一个网页</font><br />
        <font color="green" size="-1">我的第一个网页</font><br />
        <font color="green" size="2">我的第一个网页</font><br />
</body>
</html>

HTML文本修饰标记
       <big>相对默认文字大一些
      <small>对默认文字小一些
      <b>加粗
      <strong>加强语气
      <i>斜体
      <em>斜体
      <u>下划线
      <s> 删除线
      <ins><del>
      <sup> <sub>    superscript 上标 subscript 下标

HTML排版标记
    p 段落
          自动在段前段后添加一个空白行
          属性：align:值：left(左对齐,默认) center（居中对齐） right（右对齐）
   br
          强行换行<br />
   hr
         单标记 <hr />
         属性：width 宽度：值:默认是像素，也可是百分比
         align:对齐方式：left center right ，默认 center
         color :颜色
         noshade 阴影设置
       代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<hr width="50%" color="blue" size="10" noshade="noshade">
<hr width="50%"  size="3" >
<hr width="50%"  size="3" noshade="noshade">
</body>
</html>

   h1-h6
        <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
        <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>
</body>
</html>
   
   HTML字符实体
       在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
[size=12.0000pt]显示结果
[size=12.0000pt]描述
[size=12.0000pt]实体名称
[size=10.5000pt]
[size=12.0000pt]空格
[size=10.5000pt]
[size=12.0000pt]<
[size=12.0000pt]小于号
[size=12.0000pt]<
[size=12.0000pt]>
[size=12.0000pt]大于号
[size=12.0000pt]>
[size=12.0000pt]&
[size=12.0000pt]和号
[size=12.0000pt]&
[size=12.0000pt]¥
[size=12.0000pt]元（yen）
[size=12.0000pt]¥
[size=12.0000pt]©
[size=12.0000pt]版权（copyright）
[size=12.0000pt]©
[size=12.0000pt]®
[size=12.0000pt]注册商标
[size=12.0000pt]®
     更多实体符号请访问W3C官方实体符号参考网站：http://www.w3school.com.cn/tags/html_ref_entities.html
[size=10.5000pt]
   Pre:可定义预格式化的文本
        被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体.      

   <div>和span区别块元素和行内元素
         <div> 标签可以把文档分割为独立的、不同的部分
         <span> 标签被用来组合文档中的行内元素。
           如果不对span设置样式，他跟其他文本是没有区别的
   代码实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div style="color:#00FF00">
  <span style="color:red">This is a header</span>
  <span>This is a paragraph.</span>
  This is a paragraph.
</div>
</body>
</html>


file:///C:\Users\itcast\AppData\Local\Temp\ksohtml\wps3AB5.tmp.jpg





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2