当前位置:Gxlcms > html代码 > HTML基础学习笔记_html/css_WEB-ITnose

HTML基础学习笔记_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:37人阅读

1、页面

1、文件结构

......

......

.......

     , <base>, , <isindex>, <meta></HEAD><BODY>  <h2>正文</h2></BODY></HTML></script></pre> 2、语言字符集信息   <p><meta http-equiv="Content-Type" content="text/html;charset=new/2019-09-27-201927/"></p>   <p>基本上所有的网站的网页都有,现在一般都是UTF-8,和GBK2312<br /></p> 3、背景色彩和文字色彩   <p><body  bgcolor=new/2019-09-27-201927/   text=new/2019-09-27-201927/   link=new/2019-09-27-201927/  alink=new/2019-09-27-201927/  vlink=new/2019-09-27-201927/></p>   <ul>       <li><p>bgcolor --- 背景色彩</p></li>    <li><p>text --- 非可链接文字的色彩</p></li>    <li><p>link --- 可链接文字的色彩</p></li>    <li><p>alink --- 正被点击的可链接文字的色彩</p></li>    <li><p>vlink --- 已经点击(访问)过的可链接文字的色彩</p></li>   </ul>   <p>(颜色RGB16进制)</p>   <p>背景图象 <body background="image-URL"></p> 4、页面空白(试了貌似不管用)   <br />   <h3>页面左边的空白 <body leftmargin=new/2019-09-27-201927/><br /></h3>   <p>页面上方的空白(天头) <body topmargin=new/2019-09-27-201927/> new/2019-09-27-201927/=margin amount</p> 5、连接   <p> 有下划线的连接</p>   <p>< name="new/2019-09-27-201927/">无下划线不像链接</p>   <p>默认的是在原来的窗口打开<br /></p>   <p> target="Window_Name" (打开一个新的窗口属性)</p>   <p>下面百度是在新窗口打开</p>   <pre class="scode">百度</script></pre> 6、标尺线   <p><hr></p>   <p>标尺线的高度:<hr size=new/2019-09-27-201927/> </p>   <p>例如:<hr size=10><br /></p>   <p>标尺线的宽度:<hr width=new/2019-09-27-201927/></p>   <p>例如:<hr width=50><hr width=50%> </p>   <p>标尺线的位置:<hr align=new/2019-09-27-201927/> new/2019-09-27-201927/=left, right</p>   <p>例如:<hr width=50% align=left>      <hr width=50% align=right> </p>   <p>标尺线的颜色:<hr color=new/2019-09-27-201927/></p>   <p>例如:<hr color=new/2019-09-27-201927/000000 ></p>   <pre class="scode"><!doctype html><html> <head><meta http-equiv="Content-Type" content="text/html;charset=utf-8">  <title>Document    

This is a heading

This is a heading

This is a heading

百度
百度1








2、字体

1、标题字体

字体由大到小


这些标记显示黑体字,自动插入空行

2、字体大小

....new/2019-09-27-201927/=1,2,3,4,5,6,7

3、物理字体

加粗:....

斜体:.....

下划线:....

打字机文本:...

上标注:

下标注:

删除文本定义:

     Document    加粗
斜体
下划线
打字机文本
上标注
下标注
可定义删除文本
可定义删除文本
4、逻辑字体

强调字体倾斜:

强调字体加粗:

用于表示计算机源代码或者其他机器可以阅读的文本内容:

短语标签:

键盘文本:

变量的名称

对特殊术语或短语的定义

注释作用:

小型文本:

大字号:

     Document    加粗
斜体
下划线
打字机文本
上标注
下标注
可定义删除文本
可定义删除文本

逻辑字体

强调字体倾斜
强调字体加粗
用于表示计算机源代码或者其他机器可以阅读的文本内容
短语标签
键盘文本
变量的名称
对特殊术语或短语的定义
注释作用
小型文本
大字号

物理风格直接指定字体的“样式”(如粗、斜、下划线);

逻辑风格则是指定文本的“作用”(如示例文字、缩小文字)。

就像去餐馆吃饭,点菜的时候,A告诉炒菜的师傅“炒得多一点”,这是物理风格,直接指定样式;B告诉炒菜的师傅“炒得辣一点”,这是逻辑风格,指定作用。

5、字体颜色

.....

6、客户端字体

7、字符实体

&           &<            <>            >"          "

3、文字布局

1、行的控制

空行:

换行:

不换行

2、文字的对齐

... (

......)

...

new/2019-09-27-201927/=left, center, right

3、文字的分区显示

...
new/2019-09-27-201927/=left, center, right

4、列表

无序列表:

  • .........

有序类表:

  1. ..........

定义列表:

......
.....

定制表中的标记:

  • new/2019-09-27-201927/=disk,circle,square

    定制有序列表表中的序号:

  • new/2019-09-27-201927/=A,a,I,i,1

    5、预格式化文本

    .........

    .....

    ......

    6、块引用:

    .......

    7、闪烁

    ......

         Document  

    中间

    大家愚人节快乐
    大家愚人节快乐
    大家愚人节快乐
    块引用
    Her Song:
    When I was young, I listened to the radio waiting for my favorite songs....

    定制列表元素

    • ONE
    • TWO
    • THREE

    定制列表
    Today
    Today is yesterday.
    Tomorrow
    Tomorrow is today.

    有序列表

    1. Today
    2. Tommorow

    无序列表
  • Today
  • Tommorow
  • 4、图像

    1、插入图像基本语法:

    new/2019-09-27-201927/src对应图片的地址,alt图片的提示内容

    2、图像和文字的对齐

    new/2019-09-27-201927/=top,middle,bottom 分别为上、中、下

    3、边框

    new/2019-09-27-201927/=value

    5、表格

    1、基本语法:

    ...
    - 定义表格
    - 定义表行
    - 定义表头
    - 定义表元(表格的具体数据)

    默认的不带边框,

    带边框的表格:


    2、跨多行,多列的表元

    跨多列的表元

    跨多行的表元

    3、表格尺寸设置 边框尺寸设置:

    表格本身尺寸设置:

    表元间隙设置:


    表元内部空白设置:

    4、表格内文字的对齐和布局

    new/2019-09-27-201927/=left, center, right

    5、表格在页面的对齐

    new/2019-09-27-201927/=left right center

    6、表格标题

    7、表格色彩

    ....

         HTML    
    标题
    HTML MySql Css
    AB
    8、表格中分隔线的显示

    显示所有的分隔线:


    只显示组与组之间的分隔线:

    只显示行与行之间的分隔线:

    只显示列与列之间的分隔线 :

    不显示任何分隔线:


    6、表单

    1、基本语法

    (提交方法一般都是POST或者GET)

    (enctype=”multipart/form-data”提交文件)

    .........

    .........



    一般的数据提交方式都是通过表单来完成的

    下面试表单中提供给用户的输入形式

    文字输入:*=text

    密码输入:*=passwd

    复选框:*=checkbox (默认选中 checked="checked')

    单选框:*=redio

    图像坐标:*=image

    隐藏表单元素:*=hidden

    文件:type=file

    列表选择框:

    文本区域:

    7、移动的文字

    1、基本语法

    .....

    2、文字移动的属性设置

    ..... new/2019-09-27-201927/=left,right(移动的方向,向右,向左)

    3、方式:

    .....

    new/2019-09-27-201927/=scroll(一圈一圈绕着走)

    new/2019-09-27-201927/=slide(只走一次)

    new/2019-09-27-201927/=alternate (来回走)

    4、循环

    ..... new/2019-09-27-201927/=次数

    5、速度

    ..... new/2019-09-27-201927/=速度

    6、延时

    ..... new/2019-09-27-201927/=时间

    8、多媒体内容

    人气教程排行