基础元素
文本格式化
加粗字体 / 斜体 / 大号字体 / 小号字体 / 下标 / 上标 / 插入字 / 删除字 计算机输出标签：code/kbd/samp/var/pre 引用，引文，标签定义 abbr/address/dbo/q/blockquote/cite/dfn
- 格式字体
<b>加粗字体</b>
<i>斜体<i>
---------------
<strong>加粗字体</strong>
<em>斜体文字</em>
<big>字体放大</big>
<small>字体缩小</small>
<sub>下标</sub>
<sup>上标</sup>
复制代码- 预格式文本
<pre>
演示使用pre标签。 这里的空格
回车
会保留输出
</pre>
复制代码- 计算机输出文本标签
1.这些标签常用于显示计算机/编程代码
<code>计算机输出格式</code>
<kbd>键盘输入格式</kbd>
<tt>打字机文本</tt>
<samp>计算机代码样本</samp>
<var>计算机变量</var>
复制代码- address 标签
<adress>
Written by <a href="#">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</adress>
复制代码- 缩写 /首字母缩写
1.鼠标移入缩略语上，title会展示全部的文字
<abbr title="etcetera">etc.</abbr>
<acronym title="world wide web">www</acronym>
复制代码- 文字显示方向
1.下面的文字右向左显示
<p>
<bdo>
我的文字是从右向左显示的
</bdo>
</p>
复制代码- 块饮用
<p>
这是外面的文字
<q>
这是内部引入的文字
</q>
<p>
复制代码- 标记删除的文本/新替换的文本
1.del 标签标识删除 ins标识替换的内容
<p>
世界上最伟大的语言是<del>Swift</del> <ins>PHP</ins>
</p>
复制代码a标签链接
href / target / id 描述
- href 指向的地址
1.href='/index.html' 指向本网站的一个页面
2.href='https://wwww.xxx.com' 指向一个外部网址链接
3.href='#' 一个空链接
<a href='/index.html'>内部其他页面</a>
<a href='http://www.may.com'>外部网址</a>
<a href='#'>空地址</a>
复制代码- target窗口打开方式
1.默认是空，可以设置为_blank/_top
2.空本标签页打开 _blank 是新开窗口打开
3._top 情况下 如果网址是根目录，并且返回最顶部
<a href='https://www.baidu.com' target=''>访问链接1</a>
<a href='https://www.baidu.com' target='_blank'>访问链接1</a>
<a href="http://www.w3cschool.cn/" target="_top">点击这里!</a>
复制代码- id 用于创建书签，跳转到一个ID相同元素位置
1.已经存在一个id为tips 的元素
2.三种方式跳转到上面元素的位置
2.1 a标签内 id='tips'
2.2 a href='#tips'
2.3 a href='//www.w3cschool.cn/html_links.html#tips'
复制代码- 发送邮件
1.电子邮件链接 mailto:
2.单词之间的空格使用%20代替 以确保浏览器可以正常显示
<p>下面的是电子邮件链接<p>
<a href='mailto:ytxinana@163.com?Subject=Hellow%20email' target='_top'>点击发送邮件<a/>
3.更复杂的电子邮件 mailto:收件人?cc=抄送人&bcc=密送人&subject=主题&body=正文
<p>
这是另一个电子邮件链接：
<a href="mailto:someone@example.com?
cc=someoneelse@example.com&
bcc=andsomeoneelse@example.com&
subject=Summer%20Party&
body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">发送邮件!</a>
</p>
复制代码头部 heade 标签
可以在头部区域添加的元素标签：title/base/meta/style/link/script/noscript
- base 定义所有链接的URL
1.在head中配置 base 标签 该标签指定了所有的链接的默认url
2.在body中img标签 设置的是相对地址，base中设置了URL，所有能正常访问
3.在body中的a 标签 ，设置了绝对地址，但是没有设置taget跳转方式，base标签中设置了，点击链接，新开界面跳转
<head>
<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
</head>
<body>
<img src='logo.png'>
<a href='http://www.baidu.com'>点击链接跳转</a>
</body>
复制代码- meta 描述 html 文档的描述/关键词/作者/字符集
1. 单标签 格式是name='' content=''
<meta name='keywords' content='html,css,xmk.js'>
<meta name='description' content='html and css'>
<meta name='auton' content='HH'>
<!--美30秒刷新当前页面-->
<meta http-equiv='refresh' content='30'>
复制代码- link 元素
定义了文档与外部资源的关系 通常链接到样式css
<head>
<link rel='stylesheet' type='text/css' href='mystyle.css'>
</head>
复制代码- style元素
定义了html文档的样式文件引用地址 在style 中定义css样式
- script元素
用于加载脚本文件 javascript
CSS百科及常用嵌入方式
内联样式 / 内部样式 / 外部样式
img图像
必须要有的两个属性 src / alt; width/height 宽高可选； 是空标签，包含属性，并且没有闭合标签
<img src='url' alt='some_text'>
-
src属性 可以是文件夹地址，可以是网络地址
-
alt属性；替换文本； 图片无法加载的时候，替换文本会告知信息
-
width/height 设置图像的高度/宽度
-
align 文本和图像对其方式
1. align值可选 top/ bottom / middle / 默认是底部对其
2. html5 之后已经废弃
<p>这是一些文本。 <img src="/statics/images/course/smiley.gif" alt="Smiley face" align="middle" width="32" height="32">这是一些文本。</p>
复制代码- float:left 图片浮动的方式
1. style="float:right"
2. html5已经废弃
<p>
<img src="/statics/images/course/smiley.gif" alt="Smiley face" style="float:right" width="32" height="32"> 一个带图片的段落，图片浮动在这个文本的右边。
</p>
复制代码- 创建图片映像 分别监听图片点击的某一部分
1.原图 usemap='#planemap'
2.<map> 定义图像地图
3.<area> 定义图像地图中可以点击区域
4. area 的属性 alt/shanpe/coords/target/href/
- rect 的时候 coords ='x1,y1,x2,y2'
- circ 的时候 coords ='x,y,radius'
<p>点击太阳或其他行星，注意变化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
复制代码table 表格
html表格结构
1.<table></table> 定义表格
<thead></thead> 头部
<tbody></tbody> 内容
2.<tr></tr> 定义行
3.<th></th> 定义列 标题栏的列
4.<td></td> 定义列 普通的列
5.常用的标签
table 定义表格
th 定义头
tr 定义行
td 定义列
caption 表格的标题
colgroup 定义表格列的组
col 定义列的属性
thead 表格的页眉
tbody 表格主体
tfoot 表格的页脚
复制代码- 表格边框属
boder='1' - 表头 th
1.在th标签中定义
2.设置主要的公共属性 align / dir / width / height
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
复制代码- 设置没有边框的表格
- 默认是没有边框的，或者
<table border='0'>
- 默认是没有边框的，或者
- 带标题的表格
<caption> - 合并行/和并列
colspan='2'rowspan='2'
1.合并列 colspan="2" th占了2个列的位置，所以之后的tr中td 会多出来
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
2.合并行 rowspan="2" 合并2列 相当于和 下一行的 第一列合并在一起，所以下一行的td少一个
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
复制代码- 表格内的标签 一个td中 可以有 p标签；可以ul/li；也可以嵌套一个table
<table border="1">
<tr>
<td>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</td>
<td>
这个单元格包含一个表格:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格包含一个列表
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
复制代码- 单元格边距
cellpadding="10"
<table border='1' cellpadding='10'>
复制代码- 单元格间距
cellspacing='10'
1. border 设置table 和td 的border 都是1
2. 默认cellspacing是1，就是td之间 和table 之间 间距离 是1
3. 设置 cellspacing 为0 之后，border 会重叠显示
<h4>没有单元格间距:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
复制代码html列表 ul/ol (无序列表/有序列表)
1.无序列表 `ul/li`
无序索引样式 默认是disc / circle / square / none
style='list-style-type:disc'
style='list-style-type:circle'
style='list-style-type:square'
2.有序列表 `ol/li` `start="50"`
有序的索引默认 是number 可设置大些字母/小写字母/大写阿拉伯数字/小写阿拉伯数字
type='A' type='a' type='I' type='i'
3.自定义列表 dl dt dd
4.总结列表标签
ol 定义有序列表
ul 定义无序列表
li 定义列表项
dl 自定义列表
dt 自定义列表项目
dd 定义自定义列表的描述
复制代码- 自定义列表一二级
1.dt一级 dd二级
2.<dt> 与 <dd> 在其中数量不限、对应关系不限
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
复制代码- 嵌套列表
1最外层 默认是disc
2层样式是circle
3层样式是square
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国</li>
<li>欧洲</li>
<ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
复制代码html表单 form
from 属性 action
1.表单本身看不见，文本框默认是20字节宽度
2.表单是包含表单元素的区域，允许再表单中输入内容，文本域 下拉列表，单选框，复选框
3.input 输入标签输入类型 有 type='text' / type='password' / type='radio' / type='checkbox' / type='submit'
4.总结标签
form 定义一个用户输入的表单
input 定义输入域
textarea 定义文本域
lable 定义input元素的标签，一般为输入的标题
filedset 定义一组相关的表单元素，用外框包含起来
legend 定义了fieldset元素的标题
select 定义下拉选项列表
optgroup 定义选项组
option 定义下拉列表的选项
button 定义点击按钮
datalist 执行预先定义的输入空间选项列表
keygen 定义表单的密钥生成器
output 定义一个计算结果
复制代码- 输入框表单 内容输入
<form action=''>
Name:<input type='text' name='name'> <br>
Age:<input type='text' name='age'> <br>
Username:<input type='text' name='user'> <br>
Password:<input type='password' name='passw'> <br>
<input type='radio' name='sex' value='male'>
<input type='radio' name='sex' value='female'>
<input type='checkbox' name='vehicle' value='Bike'> I have a bike <br>
<input type='checkbox' name='vehicle' value='car'> i have a car
</form>
复制代码- 输入框表单 推荐按钮
点开submint 时 会讲user='33232' 通过get方式传入到php 文件中，action.php 通过get方法获取到传入值
<form name='input' action='html_form_action.php' method='get'>
Username:<input type='text' name='user'>
<input type='submit' value='submit'>
</form>
复制代码- 下拉列表 select/option
默认选择第一个，如果需要指定第三个，在第三个option中 写入属性selected
<form>
<select name='cars'>
<option value='volvo'>Volvo</option>
<option value='saab'>Saab</option>
<option value='fiat' selected>Fiat</option>
</select>
</form>
复制代码- 文本域
1.cols 列数 控制一行显示字数
2.rows 行数，控制最多显示多少行。超出了之后scroll。
<form>
<textarea rows='40' cols='80' >
文本域很多内容ss..d，s.d.sdm.，f.f
</textarea>
</form>
复制代码- 带边框的表单
fieldset
<form action=''>
<fieldset>
<legend>Personal Information:</legend>
Name:<input type='text' size='30'><br>
E-mail:<input type='text' size='30'><br>
Data of Birth:<input type='text' size='10'>
</fieldset>
</form>
复制代码- 用表单发送电子邮件
<form action='mallto:someine@example.com' method='post' enctype='text/plain'>
Name:<br>
<input type='text' name='name' value='your name'><br>
E-mail:<br>
<input type='text' name='mail' value='your email'><br>
Comment:<br>
<input type='text' name='comment' value='your comment' size['50'><br>
send-time:<br>
<select name='time'>
<option value='2016'>2016</option></br>
<option value='2017'>2017</option></br>
<option value='2018'>2018</option></br>
<select>
<input type=''submit value='Send'>
<input type='reset' value='Reset'>
</form>
复制代码html框架 iframe
内联框架 一个文档中镶嵌另一个文档，
<iframe src='url'></iframe>
-
语法：URL指向不同的网页
-
设置宽高
width / height -
移除边框
frameborder='0' -
嵌套实例 a标签刷新 iframe
1.因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中
2.标准属性
- class 元素的类名
- id 规定元素的唯一地址
- style 规定元素的行内样式
- title 规定元素的额外信息
<iframe src='/staic/demosource/demo.iframs.html' name='iframe_a'></iframe>
<p>
<a href='https://www.baidu.com' target='iframe_a'>这是一个链接，taget指向上面的iframe<a/>
</p>
复制代码html颜色 RGB
1.web 安全色216种 适应256色调色板
2.颜色名 141 宗，（17标准颜色 加上124）
3.17种标准色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色，
复制代码html 脚本 JavaScript
JavaScript 是可以插入的HTML页面的编程代码 JavaScript 使HTML页面具有更强的动态和交互性
- script标签
1.script 既可以包含脚本语言，也可以用src属性指向外部脚本文件
- 如果使用src 属性，则script是必须是空的
复制代码- noscript标签
1.不支持 JavaScript 的浏览器会使用 noscript 元素中定义的内容（文本）来替代。
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>
复制代码html字符实体
某些字体是预留的 不能使用包含这些字符的文本 链接
比如 大于号，空格 结合音标符等
- 列出常用的字符实体
显示结果 描述 实体名称 实体编号
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持)'
￠ 分 ¢ ¢
£ 镑 £ £
¥ 人民币/日元 ¥ ¥
€ 欧元 € €
§ 小节 § §
© 版权 © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
复制代码html URL
- url 是一个网址 IP地址，dns解析
- url 统一资源定位符
scheme + '://' + host + '.' + domain + :port + path + filename
1.scheme 定义因特网服务的类型 http
2.host 定义域主机 www
3.domain 因特网域名 mayt.cn
4.:port 端口:8080
5.path 定义服务器上的文件路径 如果省略 文档必须位于网站的根目录
6.filename 定义文档/资源的名称
复制代码- URL 字符编码
1.URL 只能使用 ASCII字符集
2.URL 编码 使用%其后跟随的16进制来替换非ASCII字符
3.不能包含空格
复制代码html速查列表
- 上面知识总结速查 原文链接
1.基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body> 可见文本... </body>
</html>
2.基本标签（Basic Tags）
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->
3.文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
4.链接（Links）
普通的链接：<a href="链接地址">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签： <a id="tips">
提示部分</a> <a href="#tips">跳到提示部分</a>
5.图片（Images）
<img src="URL" alt="替换文本" height="42" width="42">
6.表格（Tables）
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
7.表单（Forms）
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20">
</textarea>
</form>
8.实体（Entities）
< 等同于 <
> 等同于 >
© 等同于 ©
复制代码html媒体（Media）
音效 音乐 视频 动画
HTML插件object/embed
- object 元素
1.定义了嵌入的对象
2.具有局部属性 data type. height width usemap name form
3.用于插入（java小程序 PDF阅读器 Flash 播放器）
// 嵌入动画
<object width='400' height='500' data='bookmark.swf'></object>
嵌入html
<object width="100%" height="100px" data="/statics/demosource/snippet.html"></object>
嵌入图片
<object data='apic.png'></object>
复制代码- embed 元素
1.embed 和object标签一样
复制代码HMTL 音频（Audio）
多媒体标签
embed 定义内嵌对象 HTML4不支持 html5支持
object 内嵌对象
param 定义对象的参数
audio 定义声音
video 定义视频
source 定义media元素的多媒体元素
track 规定media元素的字幕或其他包含文本的文件 歌词?
复制代码- 使用embed
1.embed在HTML4中无效
2.不同的浏览器对音频格式的支持也不同。
3.如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
4.如果用户的计算机未安装插件，无法播放音频。
5.如果把该文件转换为其他格式，仍然无法在所有浏览器中播放
<embed height='50' width='300' src='horse.mp3'>
复制代码- 使用object
1.不同的浏览器对音频格式的支持也不同。
2.如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
3.如果用户的计算机未安装插件，无法播放音频。
4.如果把该文件转换为其他格式，仍然无法在所有浏览器中播放
<object height='50' width='300' data='horse.mp3'></object>
复制代码- 使用Audio
1. <audio> 标签来描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的),
2. 同样添加了一个 OGG 类型文件(Firefox 和 Opera浏览器中有效).如果失败，它会显示一个错误文本信息:
<audio controls>
<source src='horse.mp3' type='audio/mp3'>
<source src='horse.ogg' type='audio/ogg'>
Your browser does not support this audio format
</audio>
复制代码- 兼容性解决办法
1.html5 audio 会先尝试以mp3 ogg 来播放音乐，如果失败，将使用<embed>
<audio controls width='100' height='100'>
<source src='horse.mp3' type='audio/mpeg'>
<source src='horse.mp3 type=''audio/ogg'>
<embed height='50' width='100' src='horse.mp3'>
</audio>
复制代码- 使用超链接
1.如果网页只指向媒体文件，大多数浏览器会使用辅助应用程序来播放文件
<a href='horse.mp3'> click play the sound<a>
复制代码HMTL 视频（videos）
1.可以使用 embed object video 标签
<video controls width='320' height='240'>
<source src='movie.mp4' type='video/mp4'>
<source src='movie.ogg' type='video/ogg'>
<source src='movie.webm' type='video/webm'>
<object data='movie.mp4' width='320' height='240'>
<object src='movie.swf' width='320' height='240'>
</video>
2.ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
3.mp4：带有 H.264 视频编码和 AAC 音频编码的 mp4 文件
4.webm：带有 VP8 视频编码和 Vorbis 音频编码的 webm 文件
复制代码
扫一扫
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
