如鹏网学习笔记(七)HTML基础

HTML笔记

一、HTML简介

  1,HTML (Hyper Text Mark-up Language) 超文本标记语言,是一种编程语言,也可以说是一种标准、规范。

  2,HTML提供了一系列标记(标签),每个标记都有不同的含义和作用,浏览器根据标记的含义把内容显示到浏览器页面上

  3,超文本:页面不仅可以包含普通文本,还可以包含图片、链接、音乐、程序等非文本内容

  4,学习HTML主要是学习常用标签的用法和语法规范

二、基本标签

  <!DOCTYPE> 定义文档类型,表明该文档的类型和版本(了解)
  <html> 定义 HTML 文档(页面)
  <title> 定义文档的标题
  <meta>定义文档的元数据,影响浏览器对页面的解析处理
  <body> 定义文档的主体
  <h1> ~ <h6> 定义 标题文本
  <p> 定义段落文本
  <br> 定义换行
  <hr> 定义水平线
  <!--...--> 定义注释

三、列表标签

  1,无序列表

    <ul> 在页面上显示一个无序列表(type属性决定图标样式)
    <li> 表示一个列表项

  2,有序列表

    <ol>:在页面上显示一个有序列表(type属性:1 a A i I)
    <li>:表示一个列表项

  3,自定义列表
    dl:在页面上显示一个自定义列表

    dt:定义父节点列表项

    dd:定义子节点列表项

    注意:dt和dl不是嵌套关系,而是并列关系

四、语法规范

  1,标签成对出现,有开始标签就需要有结束标签

  2,标签不区分大小写,但建议使用小写

  3,一对标签的内容可以为空、文本、或者其他标签(标签可以嵌套)

  4,如果一对标签的内部总是为空,可以简写为单标记形式,如<br/>

  5,两对标签不可以交叉

  6,标签可以包含若干属性,属性之间使用空格隔开,属性之间没有顺序

  7,一些标签需要配合使用,共同完成一件复杂的事情

  8,浏览器把若干连续的空白字符(空格符、换行符、制表符)处理成一个空格的效果

  注意:最开始为了尽快推广HTML,浏览器对HTML文档的语法要求并不严格,这导致那些不规范的HTML代码也会被浏览器正常解析

五、文本显示效果标签

  在最开始的时候,HTML使用标签控制文本的显示效果,随着技术的发展,开始使用CSS语言控制页面的效果,
  这些文本显示效果标签不再建议使用

  <small>小号文本
  <big>大号文本
  <b>粗体文本
  <i>斜体文本
  <u>加下划线文本
  <s>加删除线文本
  <strike>加删除线文本
  <center>居中文本
  <em>强调文本
  <strong>语气更为强烈的强调文本
  <sup>上标文本
  <sub>下表文本
  <font>文本的字体、尺寸和颜色

六、HTML实体字符

  在HTML中,有一些特殊字符,如 > < " & 具有特殊含义,在使用时容易造成冲突,另外 ? ? × ÷ 等字符在键盘上没有对应的按键

  为了方便开发者灵活使用这些字符,HTML提供了对应的实体字符供开发者使用

  空格: &nbsp;
  小于号 &lt;
  大于号 &gt;
  和号 &amp;
  双引号 &quot;
  注册商标 &reg;
  乘号 &times;
  除号 &divide;

七、表格标签

  <table> 定义一个表格整体
  <caption> 定义表格标题
  <tr> 定义表格中的行
  <td> 定义行中的单元格(colspan、rowspan 属性可以合并单元格)
  <thead> 表头
  <th> 定义表格中的表头单元格
  <tbody> 表格主体,可用于大表格分段显示优化
  <tfoot> 表格的脚注

  表格单像素边框效果 <table border="1" cellspacing="0px" style="border-collapse: collapse">

八、超链接标签<a>
  1,链接到外部资源:
    <a href="http://www.rupeng.com/index.shtml">如鹏网</a>
    <a href="人丑就要多读书.jpg">人丑就要多读书.jpg</a>
    <a href="人丑就要多读书.zip">人丑就要多读书.zip</a>

    超链接只是指定资源的位置,浏览器在获得这些资源后处理时,默认的,如果浏览器可以解析显示,浏览器就会直接解析显示,
    否则,就以文件下载的方式处理(当然,也可以指定强制下载)

    target属性:指定打开资源的位置(_self、_blank)

  2,连接到页面内的另一个<a>标签

    <a name = "mao">定义一个位置(锚)</a>
    <a href="#mao">指定这个位置</a>

九、图片标签<img>

  1,用来在页面上显示一个图片
    <img src="人丑就要多读书.jpg" alt="图片未找到"/>
    src 属性:指定图片资源位置
    alt 属性:当找不到src指定的图片资源时,显示在浏览器上的说明提示
    width、height属性 :指定图片显示的宽、高
    border:指定图片边框的宽度

    注意:src的值尽量写资源的相对路径,因为很多浏览器这里不支持绝对路径

十、表单标签

    <form> 用来定义供用户输入信息的表单,收集用户信息
    <input> 可以定义多种输入控件,
    有:text、password、radio、checkbox、file、hidden、button、submit、reset
    <label> 定义 表单控件的标注
    <textarea> 定义多行的文本输入控件
    <select> 定义下拉列表 、<option> 定义下拉列表的选项
    <button> 定义普通按钮
    (在输入框中按回车键和点击submit按钮效果相同)

十一、框架标签

  1,<frameset>,<frame>定义框架集(已过时)

  <html>
    <head></head>
      <frameset rows="100px,*">
        <frame src="head.html"/>
        <frameset cols="20%,*">
          <frame src="left.html"/>
          <frame src="main.html"/>
        </frameset>
      </frameset>
  </html>

2,<iframe>定义内嵌框架
  <iframe src="inner.html" width="600px" height="370px"></iframe>

十二、页面布局标签<div>、<span>

  <div>(division)和<span>都可以把页面分成相对独立的各个部分(分区),方便布局
  不同之处在于div默认有换行效果,而span则没有

  div+css 布局方式是现在的主流,具体将在css课程中讲解
  现在有种共识,网页内容要和表现形式分离,也就是说html标签主要负责定义网页的内容,
  如一段文本,css负责定义这些内容的显示样式,如文本的颜色

时间: 2025-01-04 00:47:01

如鹏网学习笔记(七)HTML基础的相关文章

如鹏网学习笔记(四).Net常用类库

.Net常用类库 一.String成员方法(常用) 1,bool Contains(string str) 判断字符串对象是否包含给定的内容 2,bool StartsWith(String str):判断字符串对象是否以给定的字符串开始. 3,bool EndsWith(String str):判断字符串对象是否以给定的字符串结束. 案例:判断是否是网址:以http://开头.以.com或者.cn结尾. 案例:判断用户输入的邮件是否是QQ邮箱,用户输入的用户名是否包含"毛ze东"等敏

如鹏网学习笔记(五)MySql基础

MySQL基础 一.数据库概念 1,网友装备信息.论坛帖子信息.QQ好友关系信息.学籍管理系统中的学生信息等都要"持久化"的保存到一个地方, 如果通过IO写到文件中,那么会非常麻烦,而且不利于多人共享数据 2,我们开发大部分软件.网站都要大量用到书库,甚至开发游戏.手机App也要用到数据库,公司面试的时候数据库的考核在三分之一以上 3,数据库(DataBase)是保存数据的仓库,可以方便的把数据放进去,并且把数据根据各种需要取出来. 数据库管理系统(Database Managemen

如鹏网学习笔记(六)ADO.Net基础

ADO.Net基础 一.ADO.Net简介 1,程序要通过SQL语句自动化的操作数据库,必须要用一个类库, 类库要提供execute("insert into ...")/executeQuery("select * from ...")类似的方法 2,ADO.Net是.Net中提供的标准访问数据库的接口,访问不同的DBMS的底层方法是不一样的,ADO.Net把访问数据库的方法进行了统一, 访问MYSql.Oracle.SqlServer等不同数据库的方法几乎是一样

如鹏网学习笔记(二)面向对象基础

面向对象基础1,面向对象的三大特征:封装.继承.多态. 2,定义字段的方法和实例化类:和声明数组一样,类名 对象名 = new 类名(); 3,对象的引用传递:Person weiren = yzk; weiren指向对yzk当前所指向的对象. 4,null和成员变量.局部变量的不同初始化 1)null表示变量没有指向任何对象 2)对于一个为null的变量调用成员方法都会报异常NullReferenceException 3)值类型(ValueType):数据类型(int.long.double

如鹏网学习笔记(九)JavaScript

JavaScript笔记 一.JavaScript简介 1,JavaScript是一种计算机编程语言,可以像等其他编程语言那样定义变量,执行循环等. 2,JavaScript代码主要执行在浏览器上,为HTML页面提供动态效果 3,而且JavaScript是一种脚本语言,它的代码是解释执行的,也就是解释一句代码后就会执行这句代码 4,JavaScript可简称为 js 二.js变量声明 1,js是弱类型语言,弱类型并不是说数据本身没有类型,而是变量没有类型. 如一个变量a,a的值既可以是字符串类型

如鹏网学习笔记(十)DOM

DOM笔记一.DOM简介 Document Object Model 文档对象模型 DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点 DOM API 编程接口 可以用来操作页面的任意一部分内容 js+DOM编程的思想:由js基本语法控制程序的执行逻辑,由DOM API进行元素的查找获取,进而再对元素进行增删改等操作 学习DOM,除开学习设计思想外,更多的是学习DOM API的用法 二.document对象 document对象, 是Windows对象的一个属性, 表示

如鹏网学习笔记(十四)ASP.NET

Asp.net笔记 一.Socket类 进行网络编程的类,可以在两台计算机之间进行网络通讯 过程: 向服务器发送指令: GET /index.html HTTP/1.1 Host:127.0.0.1:8080 回车空行 二.浏览器是什么 浏览器就是一个Socket网络客户端,帮助用户请求网站服务器上的内容并且将返回的内容渲染为图形化内容 浏览器的过程: 用户在浏览器输入网址,浏览器向DNS服务器发出Socket请求, 服务器把请求的内容返回给浏览器, 浏览器将内容进行解析并渲染绘制成页面展现,

如鹏网学习笔记(十三)EasyUI

一.EasyUI简介 是一组基于JQuery的UI插件集合 主要作用:为JQuery对象提供新的方法,实现新的功能 可以快速创建出简洁.友好.美观的页面,非常适合做网站后台管理页面(不够漂亮,不适合做前台页面) 官方文档:http://www.jeasyui.com/documentation/index.php 二.panel组件的创建 分两步: 1,引入需要的样式文件和js文件 <link rel="styleSheet" type="text/css"

Java基础学习笔记七 Java基础语法之继承和抽象类

继承 继承的概念 在现实生活中,继承一般指的是子女继承父辈的财产.在程序中,继承描述的是事物之间的所属关系,通过继承可以使多种事物之间形成一种关系体系. 例如公司中的研发部员工和维护部员工都属于员工,程序中便可以描述为研发部员工和维护部员工继承自员工,同理,JavaEE工程师和Android工程师继承自研发部员工,而维网络维护工程师和硬件维护工程师继承自维护部员工.这些员工之间会形成一个继承体系,具体如下图所示. 在Java中,类的继承是指在一个现有类的基础上去构建一个新的类,构建出来的新类被称