HTML自学笔记

1、HTML

Hyper Text Markup Language

超文本标记语言

超文本：比普通文本更加强大，可以添加各种样式

标记语言：通过一组标签来对内容进行描述。

标签：<关键字>

<开始关键字>内容</结束关键字>

可嵌套

<h*>内容</h*>

//起着标题附加换行的作用，内容将被作为标题，*处应填数字，由1开始字号最大最突出，依次减小，到6为止

<br/>

//换行标签，是空标签，但建议使用以下的段落标签

<p>内容</p>

//有利于后续编辑

<b>内容</b>或<strong>内容</strong>

//加粗标签后者带语义，对搜索引擎友好

<i>内容</i>或<em>内容</em>

//斜体标签后者带语义，对搜索引擎友好

<!--内容-->

//注解

<hr/>

//显示贯穿页面的水平分割线

font标签常用属性：

color：改变字体颜色

size:改变字体大小,最大为7

face:改变字体

eg:你好

<h1>送灵澈上人</h1>

<p><i><b>唐代：刘长卿</b></i></p>

<p>苍苍竹林寺，</p>

<p>杳杳钟声晚。</p>

<p>荷笠带斜阳，</p>

<p>青山独归远。</p>

1）语法规范

常用快捷键 

<!DOCTYPE html>

<!--

1、文档声明

2、根标签html

3、html文件主要包含头部分和体部分

    头部分：放置一些页面信息

    体部分：放置页面内容

    4、通过标签来对内容进行描述，标签通常是由开始标签和结束

    标签组成

    5、标签不区分大小写，建议使用小写

-->

<html>

    <head>

        <meta charset="utf-8" /><!--放置网站的配置信息-->

        <!--指定网站的编码方式-->

        <title></title><!--指定网站标题-->

    </head>

    <body>

    </body>

</html>

@案例1：在网页中显示如下信息： 

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>学校简介</title>

    <body>

    <h2><font face="黑体">华南理工大学</font></h2>

    <hr/>

    <p><font color="darkblue">华南理工大学</font>是直属教育部的全国重点大学，坐落在南方名城广州，占地面积约391万平方米。校园分为三个校区，五山校区位于广州市天河区石牌高校区，校园内湖光山色、绿树繁花，民族式建筑与现代化楼群错落有致，文化底蕴深厚，是教育部命名的“文明校园”；大学城校区位于广州市番禺区广州大学城内，是一个环境优美、设施先进、管理完善、制度创新的现代化校园；广州国际校区位于广州市番禺区创新城，与广州大学城隔岸相望。三个校区交相辉映，是莘莘学子求学的理想之地。</p>

<p>华南理工大学原名华南工学院，组建于1952年全国高等学校院系调整时期，是以中山大学工学院、华南联合大学理工学院、岭南大学理工学院工科系及专业、广东工业专科学校为基础，调入湖南大学、武昌中华大学、武汉交通学院、南昌大学、广西大学等5所院校部分工科系及专业组建而成，1988年改为现名。学校办学历史悠久，作为组建基础的中山大学工学院源于1931年成立的国立中山大学理工学院；华南联合大学理工学院由1930年成立的私立广东国民大学工学院和1940年成立的私立广州大学理工学院合并而成；岭南大学理工学院可追溯至1930年成立的岭南大学工学院；广东工业专科学校的前身是1918年成立的广东省立第一甲种工业学校，其历史可追溯至1910年清政府创办的广东工艺局。这些院校是早期中国南方培养高级工程技术人才的摇篮和民主科学思想的重要策源地。</p>

<p>1960年，学校被评为全国文教战线先进单位，同年成为全国重点大学；1981年经国务院批准为首批博士和硕士学位授予单位；1993年在全国高校开部省共建之先河；1995年通过“211工程”部门预审，进入国家面向21世纪重点建设的大学行列；1999年底，通过教育部本科教学工作优秀评价，成为全国第一批“本科教学优秀学校”；同年，经科技部、教育部批准，成立国家大学科技园；2000年，经批准成立研究生院；2001年，实行新一轮部省重点共建，学校进入国家高水平大学建设（“985工程”）行列，2007年以优秀成绩通过教育部本科教学工作水平评价；2012年，进入上海交通大学“世界大学学术排名”500强；2013年1月，入选《中国大学评价》的“中国一流大学”行列；同年，再次进入上海交大“世界大学学术排名”；2016年在“世界大学学术排名”中，整体进入300强，工科领域排名跃升至全球第22名。</p>

<p>经过60多年的建设和发展，华南理工大学成为以工见长，理工结合，管、经、文、法、医等多学科协调发展的综合性研究型大学。轻工技术与工程、食品科学与工程、城乡规划学、材料科学与工程、建筑学、化学工程与技术、风景园林学等学科整体水平进入全国前十位。化学、材料学、工程学、农业科学、物理学、生物学与生物化学、计算机科学、环境科学与生态学、临床医学9个学科进入国际ESI全球排名前1%。学校办学条件良好，教学环境优良，治学严谨，秉承“博学慎思 明辨笃行”的校训，坚持高素质、“三创型（创新、创造、创业）”、具有国际视野的拔尖创新人才的培养目标，着力培养创新型、复合型人才。建校60多年来，学校为国家培养了高等教育各类学生38万多人，一大批毕业校友成为我国科技骨干、著名企业家和领导干部。</p>

    </body>

</html>

@案例2：显示图片

img:标签

src:指定路径，最好不要用中文

width:指定图片宽度，单位为像素，下同

height:指定图片高度

alt:文件加载失败时的提示信息

只调整宽或高浏览器将依照比例等比缩放

eg:

<img src="当前路径图片"/>

<img src="../img/aa.jpg" width="240px" height="225px" alt="图片加载失败，请重试"/>

关于文件路径：

./代表的是当前路径，缺省即默认此方式

../代表的是上一级路径

../../再上一级

@案例3：友情链接

列表标签：

无序：ul.li是列表项,有type标签可设置样式,有三种可选

<ul type="square">

<li>百度一下</li>

<li>新浪微博</li>

</ul>

有序：ol,有5个type属性；

start属性，设定从几开始

<ol type="a">

<li>百度一下</li>

<li>新浪微博</li>

</ol>

@案例4：超链接

使用a和href标签,如以下例子，将覆盖原页面

href：指定要跳转去的链接地址，需加上http协议。如果访问的是本网站的html文件，可以直接写文件路径

打开链接网页

<ol>

<li><a href="http://www.baidu.com" target="_blank">百度一下</a></li>

<li><a href="https://weibo.com">新浪微博</a></li>

</ol>

若要另开网页，使用target属性，_blank即可

默认打开方式是_self

@案例5：制作表格

表格标签table:

常用属性：

border:加边框，像素为单位

width:指定宽度

height:指定高度

bgcolor：设置背景色

background：设置背景

align:设置对齐方式,在table上加就是设置表格相对于页面的对齐方式，在tr或者td上加就是设置文本对齐方式

<td>列标签

<tr>行标签

//显示一个一行一列的表格

<table>

<tr>

<td></td>

</tr>

</table>

//显示一个一行四列的表格

<table>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

//三行三列

<table border="1px" width="400px" bgcolor="Yellow" align="center">

<tr bgcolor="Blue">

<td>1</td>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td bgcolor="Pink">2</td>

<td>2</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

<td>3</td>

<td>3</td>

</tr>

</table>

表格的合并

colspan:跨列

rowspan:跨行，参数为所跨行的数目，上同

注意，要把被占用行或列的相关代码删去

//三行三列

<table border="1px" width="400px" bgcolor="Yellow" align="center">

<tr bgcolor="Blue">

<td colspan="2">10</td>

<td>12</td>

</tr>

<tr>

<td bgcolor="Pink" colspan="2"  rowspan="2">20</td>

<td rowspan="2">22</td>

</tr>

<tr>

</tr>

</table>

表格的嵌套

<table border="1px" width="400px" bgcolor="Yellow" align="center">

<tr bgcolor="Blue">

<td colspan="2">10</td>

<td>12</td>

</tr>

<tr>

<td bgcolor="Pink" colspan="2"  rowspan="2">

<table border="1px" width="100%">

<tr>

<td>1</td>

<td>1</td>

</tr>

<tr>

<td>1</td>

<td>1</td>

</tr>

</table>

</td>

<td rowspan="2">22</td>

</tr>

<tr>

</tr>

</table>

@案例6:制作首页

步骤：

6)基本表单输入项

input标签

<input type="text"/>普通文本输入

<input type="password"/>输入密码

<input type="file"/>上传文件

<input type="radio"/>复选框

<input type="radio" name="sex"/>单选框

<input type="checkbox"/>//勾选框

<textarea>cols="" rows=""</textarea>//文本输入区域,可设置宽高

<select>

<option>内容</option>

<option>内容</option>

<option>内容</option>

</select>

下拉列表

<input type="submit" value="内容"/>

提交按钮，内容为按钮上文本

type="reset"重置按钮

type="button"普通按钮

type="hidden"隐藏域

name属性：提交后网址将显示相应内容，作为参数名称

id属性：给输入项取一个名字，以便于我们操作它

<input type="text" name=username/>

<input type="date"/>

下拉列表选择日期

<input type="number"/>

只能输入数字

<input type="tel"/>

弹出九宫格数字键盘

placeholder="文本"

显示输入提示

<form>需要提交的内容</form>

属性：action提交后跳转地址

method有get（默认，数据有限制）与post方式

post不会像get一样将相关信息拼接到跳转后的网址后，而是封装在请求体中

<input type="checkbox"/>阅读

<input type="checkbox"/>绘画

<input type="checkbox"/>朗诵</br>

<input type="radio" name="sex"/>男

<input type="radio" name="sex"/>女</br>

<textarea cols="20" rows="5"></textarea>

7）框架标签

frameset

使用frameset时请删除body



<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    <frameset rows="15%,*">

        <frame src="a.html"/>

            <frameset cols="15%,*">

            <frame src="b.html">

            <frame src="c.html">

            </frameset>

    </frameset>

</html>

HTML自学笔记的更多相关文章

  1. 《Linux内核设计与实现》课本第四章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第四章自学笔记 进程调度 By20135203齐岳 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统.多任务操作系统使多个进程处于堵 ...

  2. 《Linux内核设计与实现》课本第三章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第三章自学笔记 进程管理 By20135203齐岳 进程 进程:处于执行期的程序.包括代码段和打开的文件.挂起的信号.内核内部数据.处理器状态一个或多个具有 ...

  3. 《Linux内核设计与实现》课本第十八章自学笔记——20135203齐岳

    <Linux内核设计与实现>课本第十八章自学笔记 By20135203齐岳 通过打印来调试 printk()是内核提供的格式化打印函数,除了和C库提供的printf()函数功能相同外还有一 ...

  4. python自学笔记

    python自学笔记 python自学笔记 1.输出 2.输入 3.零碎 4.数据结构 4.1 list 类比于java中的数组 4.2 tuple 元祖 5.条件判断和循环 5.1 条件判断 5.2 ...

  5. ssh自学笔记

    Ssh自学笔记 Ssh简介 传统的网络服务程序,如:ftp.pop和telnet在本质上都是不安全的,因为它们在网络上用明文传送口令和数据,别有用心的人非常容易就可以截获这些口令和数据.而且,这些服务 ...

  6. JavaScript高级程序设计之自学笔记（一）————Array类型

    以下为自学笔记. 一.Array类型 创建数组的基本方式有两种: 1.1第一种是使用Array构造函数(可省略new操作符). 1.2第二种是使用数组字面量表示法. 二.数组的访问 2.1访问方法 在 ...

  7. vue 自学笔记记录

    vue 自学笔记(一): 知识内容:  安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...

  8. JS自学笔记05

    JS自学笔记05 1.例题 产生随机的16进制颜色 function getColor(){ var str="#"; var arr=["0","1 ...

  9. JS自学笔记04

    JS自学笔记04 arguments[索引] 实参的值 1.对象 1)创建对象 ①调用系统的构造函数创建对象 var obj=new Object(); //添加属性.对象.名字=值; obj.nam ...

  10. JS自学笔记03

    JS自学笔记03 1.函数练习: 如果函数所需参数为数组,在声明和定义时按照普通变量名书写参数列表,在编写函数体内容时体现其为一个数组即可,再传参时可以直接将具体的数组传进去 即 var max=ge ...

随机推荐

  1. 常见内网IP段

    以下IP段为内网IP段: 192.168.0.0 - 192.168.255.255 172.16.0.0 - 172.31.255.255 10.0.0.0 - 10.255.255.255

  2. gitlab之五: gitlab之webhook

    webhook(网络钩子),一般与jenkins联合使用,gitlab的某个项目的代码更新了后就触发 webhook中配置的 url ,这个url一般是某一个jienkins中某一个job的url.即 ...

  3. PHP使用Apache中的ab测试网站的压力性能及mpm介绍

    打开Apache安装的bin目录 shift+鼠标右键 复制粘贴以下代码->回车 ab -n 1000 -c 100 http://localhost/test.php 上例表示总共访问http ...

  4. day9文件操作---从即日起时景丽阳老师给我们讲课

    今天的主要内容是文件的操作,读,写,只读只写,或者可读同时可写,追加写,以二进制的方式读,以二进制的方式写,以二进制的方式追加. 思维导图: 给你一个文件路径,从中找出所有的文件,方法如下: # 方法 ...

  5. jquery模拟form表单提交并新打开页面

    /** * form表单提交本页面打开 * @param url * @param params */ function postCurrent(url,params){ var form = $(& ...

  6. vim 命令图解

    vim 命令,vim是一个很好的编辑工具,下面为大家介绍一下vim入门基本命令. 方法/步骤   1 [vim 命令-启动vimtutor]:执行命令:vimtutor.vimtutor是vim使用入 ...

  7. hadoop离线计算项目上线配置问题记录

    最近上线一个hadoop离线处理项目,因为在低配置(8G,4核)的时候装的CDH,后来集群配置(64G,16核)上来了,但许多参数不会自动修改,需要自己调整,处理过程中遇到的配置问题记录下. 1.hi ...

  8. Mybatis之注解实现动态sql

    通过注解实现动态sql一共需要三部:1.创建表,2.创建entity类,3.创建mapper类, 4.创建动态sql的Provider类.1.和2.可以参见该系列其他文章,这里主要对3和4进行演示,并 ...

  9. linux 进阶命令

    进阶命令 1    df指令   查看磁盘的空间 # df -h    -h表示可读性更高,方便读取 执行指令后(Filesystem:磁盘名称  size:磁盘总大小  Used: 被使用的大小  ...

  10. VirtualBox查看虚拟机IP地址

    在终端输入如下内容 ifconfig 结果如图所示 eth0 内容中 inet 后的地址10.0.2.15即为虚拟机IP地址,lo 中的 inet 后的地址时本地环回,用于测试网络