HTML自学笔记
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自学笔记的更多相关文章
- 《Linux内核设计与实现》课本第四章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第四章自学笔记 进程调度 By20135203齐岳 4.1 多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统.多任务操作系统使多个进程处于堵 ...
- 《Linux内核设计与实现》课本第三章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第三章自学笔记 进程管理 By20135203齐岳 进程 进程:处于执行期的程序.包括代码段和打开的文件.挂起的信号.内核内部数据.处理器状态一个或多个具有 ...
- 《Linux内核设计与实现》课本第十八章自学笔记——20135203齐岳
<Linux内核设计与实现>课本第十八章自学笔记 By20135203齐岳 通过打印来调试 printk()是内核提供的格式化打印函数,除了和C库提供的printf()函数功能相同外还有一 ...
- python自学笔记
python自学笔记 python自学笔记 1.输出 2.输入 3.零碎 4.数据结构 4.1 list 类比于java中的数组 4.2 tuple 元祖 5.条件判断和循环 5.1 条件判断 5.2 ...
- ssh自学笔记
Ssh自学笔记 Ssh简介 传统的网络服务程序,如:ftp.pop和telnet在本质上都是不安全的,因为它们在网络上用明文传送口令和数据,别有用心的人非常容易就可以截获这些口令和数据.而且,这些服务 ...
- JavaScript高级程序设计之自学笔记（一）————Array类型
以下为自学笔记. 一.Array类型 创建数组的基本方式有两种: 1.1第一种是使用Array构造函数(可省略new操作符). 1.2第二种是使用数组字面量表示法. 二.数组的访问 2.1访问方法 在 ...
- vue 自学笔记记录
vue 自学笔记(一): 知识内容: 安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...
- JS自学笔记05
JS自学笔记05 1.例题 产生随机的16进制颜色 function getColor(){ var str="#"; var arr=["0","1 ...
- JS自学笔记04
JS自学笔记04 arguments[索引] 实参的值 1.对象 1)创建对象 ①调用系统的构造函数创建对象 var obj=new Object(); //添加属性.对象.名字=值; obj.nam ...
- JS自学笔记03
JS自学笔记03 1.函数练习: 如果函数所需参数为数组,在声明和定义时按照普通变量名书写参数列表,在编写函数体内容时体现其为一个数组即可,再传参时可以直接将具体的数组传进去 即 var max=ge ...
随机推荐
- CentOS7安装MySQL并设置远程登录
在CentOS中默认安装有MariaDB,这个是MySQL的分支,但为了需要,还是要在系统中安装MySQL,而且安装完成之后可以直接覆盖掉MariaDB. 1 下载并安装MySQL官方的 Yum Re ...
- Codeforces 875F Royal Questions (看题解)
我还以为是什么板子题呢... 我们把儿子当做点, 公主当做边, 然后就是求边权值最大基环树森林. #include<bits/stdc++.h> #define LL long long ...
- Codeforces 1017F The Neutral Zone (看题解)
这题一看就筛质数就好啦, 可是这怎么筛啊, 一看题解, 怎么会有这么骚的操作. #include<bits/stdc++.h> #define LL long long #define f ...
- BZOJ2724 [Violet 6]蒲公英 分块
原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ2724.html 题目传送门 - BZOJ2724 题意 求区间最小众数,强制在线. $n$ 个数,$m ...
- BZOJ1497 [NOI2006]最大获利 网络流 最小割 SAP
原文链接http://www.cnblogs.com/zhouzhendong/p/8371052.html 题目传送门 - BZOJ1497 题意概括 有n个站要被建立. 建立第i个站的花费为pi. ...
- js让元素获取焦点
js让元素获取焦点$("#startAddress").focus();
- POJ 1094 Sorting It All Out 【拓扑排序】
<题目链接> 题目大意: 对于N个大写字母,给定它们的一些关系,要求判断出经过多少个关系之后可以确定它们的排序或者排序存在冲突,或者所有的偏序关系用上之后依旧无法确定唯一的排序. 解题分析 ...
- POJ 1200 Crazy Search 【hash】
<题目链接> 题目大意: 给定n,nc,和一个字符串,该字符串由nc种字符组成,现在要你寻找该字符串中长度为n的子字符串有多少种. 解题分析: 因为要判重,所以讲这些字符串hash一下,将 ...
- 数据库相关--net start mysql 服务无法启动（win7系统）解决
系统:win7 旗舰版 64位 MySQL:8.0.11 家里台式机上不久之前安装了MySQL,一段时间没碰过后,突然启动不了了(我有一头小毛驴,我从来也不骑,有一天我心血来潮骑它去赶集) 先是在系统 ...
- Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）
Android XML shape 标签使用详解 一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...