A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2017-1-16 16:40 编辑

【济南中心】PHP课程同步笔记day01:HTML介绍

html简介
  HyperText Markup Language
    超文本标记语言
        超文本
            能够表达更丰富的内容(相对于普通文本)
            标记:标识符号,就是html中的标签
       语言
           不是编程语言,就是html标签的描述
           浏览器来翻译html代码
   网页扩展名
         .html  .htm

HTML文档结构
  HTML框架基本构架
       <html>
          <head>
          <title></title>
          </head>
          <body>
          </body>
     </html>
     解释:
          带<>的都叫标签
          html: 指明当前的文档的类型,是一个网页
          head是网页头部 包括网页的相关信息,基本设置,其中title网站的标题就在里面。
          body:在浏览器的看到的内容。

html标签分类
         双标签 <font>HTML</font>,有开始标签和结束标签(标记)
        单标签 <br />

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

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

html注释
      <!--注释内容-->
      注释的内容在html页面中是无法看到的,但是可以在页面源代码中发现
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/align][align=left]<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] 纯文本查看 复制代码
<html>[/align] <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 阴影设置
        
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/align]<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> 定义最小的标题。
      
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/align]<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 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
显示结果
描述
实体名称

空格
<
小于号
<
>
大于号
>
&
和号
&
¥
元(yen)
¥
©
版权(copyright)
©
®
注册商标
®
     更多实体符号请访问W3C官方实体符号参考网站:http://www.w3school.com.cn/tags/html_ref_entities.html

   Pre:可定义预格式化的文本
        被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体.      

   <div>和span区别块元素和行内元素
         <div> 标签可以把文档分割为独立的、不同的部分
         <span> 标签被用来组合文档中的行内元素。
           如果不对span设置样式,他跟其他文本是没有区别的
   
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/align]<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>






1 个回复

倒序浏览

一直很喜欢黑马的这个免费资源
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马