如鹏网HTML代码学习记录

HTML常用标签--字体

字体标签 <font>

例:<font color="red">HTML字体标签</font>,常见属性size color,还有其它属性,比如:face

标题标签 <H1></H1>...<H6></H6>

特殊字符

如果要在网页上显示一些特殊符号,比如< > & 等。因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊的方式来表示。

&lt;


<


&quot;


"


&nbsp;


空格


&gt;


>


&reg;


?


&trade;


?


&amp;


&


&copy;


?

   

无序列表

<ul> <!-- 符号标签(○●■)-->

<li>游戏</li> <li>部门</li>

</ul>

注:ul中 type 属性有三个值 [ circle|disc|square ],用于规定列表的项目符号, 但不赞成使用。

有序列表

<ol> <!-- 数字标签(a A 1 i I)-->

<li>游戏</li> 

<li>部门</li>

</ol>

注:ol中 type 属性同样不赞成使用。

如果想做出效果更好的列表,如:黑色圆点用图片表示,就用到CSS

定义列表(definition list)

<dl>
      <dt>游戏</dt>
        <dd>穿越火线</dd>
        <dd>英雄联盟</dd>
      <dt>部门</dt>
        <dd>研发部门</dd>
        <dd>销售部门</dd>
    </dl>

图像标签 <img>

<img src="1.jpg"

border="3px" 

title="鼠标移动上提示文字" 

alt="图片说明文字" 

width="500px" 

height="200px"/>

src:图像URL地址;border用来设置图像的边框;alt:用来为图像定义一串预备的可替换的文本,不能超过1024字符。

表格标签 <table>

用于格式化数据。
    例:

<table border width cellpadding cellspacing>
          <caption>标题</caption>
          <thead>
             <th>姓名</th>  <!--对表格的第一行或者第一列进行 -->
             <th>年龄</th>  <!--格式化,就是粗体居中显示 -->
          </thead>
          <tbody>
            <tr>  <!--行标签 -->
              <td>张三</td><td>20</td>  <!--单元格标签 -->
            </tr>
            <tr><td>李四</td><td>25</td></tr>
          </tbody>
        </table>

<table>常用属性
    border:框线粗细 0代表无
    width:宽度 接收整数值、百分数
    cellpadding:单元格内容与边框的距离
    cellspacing:单元格与相邻单元格之间的距离
<td>常用属性
    colspan:合并同行单元格
    rowspan:合并同列单元格

每个表格可以有一个表头、一个表尾和一个或多个表体 (即正文)
THEAD    TBODY        TFOOT
TBODY 可以控制表格分行下载,从而提高下载速度(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部分内容,这样会减少用户等待时间)。

超链接标签 <a>

用法一:超链接 <a href="">

<a href="http://www.163.com" target="_blank">网易</a>

href:要打开资源的路径,可以是URL,也可以是本地文件。
    target:指定在哪个窗口或者帧中打开。有四个值:
_blank:在一个新开的空白窗口中打开链接
_parent:在父级窗口中打开
_self:在自身页面中打开链接(默认)
_top:在整个浏览器的最顶端(前端)开始打开链接
用法二:定位标记  <a name="">
    链接到同一文档中的特定位置叫做定位标记(锚链接)。一般在本页面中使用,当网页内容过长,定位标记会比拖动滚动条方便快捷。
    注:定位标记要和超链接结合使用才有效。
    示例:

<a name= "标记" >标记位置</a>
        <p>…….<!--很多空行以制造网页过长的效果 -->
        <a href= "#标记">返回标记位置</a>

注释:使用定位标记时一定在href值的开始加入#标记名

HTML常用标签--框架

<html>
<frameset rows="20%,*">   <!-- 框架标记,用以划分框窗 -->  
  <frame src="top.html">   <!-- 框窗标记,设定一个框窗 -->
  <frameset cols="25%,75%">
    <frame src="left.html">
    <frame src="right.html">
  </frameset>
</frameset>
</html>

所有框架标记 要放在一个总起的 html 档,这个档案只记录了该框架 如何划分,不会显示任何资料,所以不必放入 <BODY> 标记。

<frameset>常用属性
    COLS="20%,*":垂直切割画面(如分左右两个画面),接受整数值、百分数,* 则代表占用余下空间。数值的个数代表分成的视窗数目且以逗号分隔。
    ROWS="120,*":就是横向切割,将画面上下分开,数值设定同上。
    frameborder="0":设定框架的边框,其值只有 0 和 1 ,0 表示不要边框,1 表示要显示边框。
    border="0":设定框架的边框厚度,以 pixels 为单位。
    bordercolor="#999":设定框架的边框颜色。
    framespacing="5" :表示框架与框架间的保留空白的距离。

<frame>常用属性
    src="top.html":设定此框窗中要显示的网页档案名称,每个框窗一定要对应著一个网页档案。
    name="top":设定这个框窗的名称,这样才能指定框架来作连结,必须但任意命名。
    scrolling="auto":设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示,AUTO是视情况显示。
    noresize:设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很随意地拉动框架,改变其大小。

<NOFRAMES>
    当使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免这种情况,可使用 <NOFRAMES> 这个标记,当使用者的浏览器看不到框架时,他就会看到 <NOFRAMES> 与 </NOFRAMES> 之间的提示内容,而不是一片空白。  如下:
    <frameset rows="80,*">
      <noframes>
       <body>
        很抱歉,您使用的浏览器不支持框架功能,请转用新的浏览器。
      </body>
      </noframes>
      <frame name="top" src="a.html">
      <frame name="bottom" src="b.html">
    </frameset>

HTML语法--表单

<INPUT>标签:接受用户输入信息
    <input type="text" value="" />
    type标签指定输入标签的类型,共有10个值:文本框text、密码框
    password、单选框radio、复选框checkbox、隐藏字段hidden、提
    交按钮submit、重置按钮reset、按钮button、文件上传file、图像
    image.
<SELECT>标签:定义一个选择列表
    <select name="city">
        <option value="1">北京</option>
        <option value="2">郑州</option>
    </select>
    注:<option>:定义下拉列表中的选项,属性 selected 没有属性值
    加在其中一个子项上,该子项就变成默认被选中项。

<TEXTAREA>标签:多行文本框
    <textarea rows="3" rols="20"> </textarea>
    cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
<label>标签:
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。for的属性值指向绑定表单元素的 id 值。

块元素

大多数 HTML 元素被定义为块级元素或内联元素。
-块级元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>
-内联元素
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>

DIV> <SPAN>
    DIV
    HTML DIV 是块级元素,它是可用于组合其他HTML元素的容器。DIV元素没有特定的含义。与CSS一起使用,可用于对大的内容快设置样式属性。
    <div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
SPAN
    HTML <span> 元素是内联元素,可用作文本的容器。<span> 元素也没有特定的含义,当与 CSS 一同使用时,可用于为部分文本设置样式属性。
HTML语法--头标签

title:指定浏览器标题栏显示的内容
base:标签为页面上的所有链接规定默认地址或默认目标
    href属性:规定页面中所有相对链接的基准 URL
    target属性:指定打开超链接的方式
meta:可提供有关页面的元信息
    content属性:定义与 http-equiv 或 name 属性相关的元信息
    http-equiv属性:把 content 属性关联到 HTTP 头部
    name属性:把 content 属性关联到一个名称
link:
    rel属性:目标文档与当前文档的关系
    type属性:文档类型
时间: 2024-10-05 23:27:01

如鹏网HTML代码学习记录的相关文章

Hibernate 官网文档学习记录

这篇博客主要记录看官方文档时,学习到的要点内容 1.关于XXX.hbm.xml的配置 1)property元素中的type属性值不是java类型也不是sql type类型,是hibernate自己的映射类型.该属性值可以省略,hibernate会在启动的时候通过反射自动的将java类型和sql type类型匹配起来,但有时候会得不到期望的类型,比如java 的util包下的Date类型不知道是转为sql type中的data,time还是timeStamp类型.如果希望启动程序的时候效率高些,建

openssl代码学习记录-SSL

通过Source Insight查看openssl的源代码,可发现SSL建立的来龙去脉. 1.    先看SSL_NEW. static int ssl_new(BIO *bi) { BIO_SSL *bs; bs = (BIO_SSL *)OPENSSL_malloc(sizeof(BIO_SSL)); if (bs == NULL) { BIOerr(BIO_F_SSL_NEW, ERR_R_MALLOC_FAILURE); return (0); } memset(bs, 0, sizeo

Array方面Js底层代码学习记录

一..clear() →Array function clear() { this.length = 0; return this; } 返回清除item的空数组. 例子: var fruits = ['Apple', 'Orange', 'Bananas', 'peach']; fruits.clear(); // -> [] fruits // -> [] 二..clone() →Array function clone() { return slice.call(this, 0); }

杨中科与如鹏网网友的对话—阐述了C、C++、Java之学习与程序化的思维

[如鹏网网友]:请问老师,C要学到什么程度才能去学JAVA之类的面向对象的语言呢?[杨中科]:能写有一定难度的程序.比如写一个俄罗斯方块.聊天软件什么的.面向对象的核心还是面向过程,面向过程都没学好呢,理解面向对象纯属越学越糊涂[如鹏网网友]:对,当初就是C都没学好,所以学C++也是越学越累[杨中科]:我反感大学这一点.上学期学C.下学期学C++.完全违背学习规律.应该在学完C后安排一个学期的实战开发课.像咱们如鹏网的课那样.积累的足够的开发经验,明白了“一切语言.面向对象都是纸老虎”以后再学其

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

HTML笔记 一.HTML简介 1,HTML (Hyper Text Mark-up Language) 超文本标记语言,是一种编程语言,也可以说是一种标准.规范. 2,HTML提供了一系列标记(标签),每个标记都有不同的含义和作用,浏览器根据标记的含义把内容显示到浏览器页面上 3,超文本:页面不仅可以包含普通文本,还可以包含图片.链接.音乐.程序等非文本内容 4,学习HTML主要是学习常用标签的用法和语法规范 二.基本标签 <!DOCTYPE> 定义文档类型,表明该文档的类型和版本(了解)

树莓派官网学习记录

树莓派官网学习记录 和GPIO Zero 一起开始 我们将做的 树莓派一侧的排针是称为通用输入输出引脚(GPIO) 这些引脚允许树莓派去控制现实中的东西.你能连接元件到这些引脚上:输出设备像能任意被开关的LED(发光二极管):或者是输入设备像能用作触发事件的一个按钮或者传感器,比如当一个按钮被按下的时候,点亮一只LED. 通过使用GPIO Zero 库,你能很容易的控制树莓派的GPIO引脚. 我们将学习的 通过完成这个资源你将学到: 如何将LED和按钮连接到树莓派的GPIO上 如何通过GPIO

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

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

TP框架代码学习 学习记录 3.2.3

文件:think.class.php PHP提供register_shutdown_function()这个函数,能够在脚本终止前回调注册的函数,也就是当 PHP 程序执行完成后执行的函数.register_shutdown_function 执行机制是:PHP把要调用的函数调入内存.当页面所有PHP语句都执行完成时,再调用此 函数.注意,在这个时候从内存中调用,不是从PHP页面中调用,所以上面的例子不能使用相对路径,因为PHP已经当原来的页面不存在了.就没有什么相对路 径可言.注意:regis

如鹏网 静态Web开发 第一章:html

第一章:html 本章主干知识点: 1.最基本的html文件的格式是什么? 2.常用标签:font.列表(ul.ol.li).img 3.表格标签:table.tr.td:表格的合并. 4.超链接.新窗口中打开的超链接.超链接锚点. 5.框架:frameset 6.表单:input(文本.radio.checkbox.隐藏字段.submit):select下拉列表:textarea:label: 7.div和span的区别. -----------------------------------