HTML
HTML元素
元素语法:
1. 以开始标签起始(<p>),以结束标签(</p>)终止
2. 元素的内容是开始标签和结束标签之间的内容
3. 某些HTML元素具有空内容
4. 空元素在开始标签中进行关闭(<br/>)
5. 大多数HTML元素可拥有属性
大多数HTML元素可以嵌套(元素中包含元素),HTML文档就是由相互嵌套的HTML元素构成的。
空元素:没有内容的HTML元素,如:<br/>、<hr/>
tips:HTML标签对大小写不敏感。
HTML属性
1. HTML元素可以设置属性
2. 属性可以在元素中添加附加信息
3. 属性一般描述于开始标签
4. 属性总是以 名称/值 对的形式出现
属性值应使用被包括在引号内,且属性和属性值对大小写不敏感(推荐使用小写)
HTML标题
标题标签:<h1> ~ <h6>
<h1>这是一个标题</h1>
标题标签属于块元素,浏览器会自动地在标题的前后添加空行。
标题很重要:搜索引擎使用标题为网页结构和内容编制索引,用户可以通过标题来快速浏览网页。所以,不要仅仅是为了生成粗体或大号的文本而使用标题。
水平线标签:<hr>
空元素,在页面中创建水平线,用户分隔内容。
注释
<!-- 这是一个注释 -->
HTML段落
段落标签:<p>
<p>这是一个段落 </p>
段落属于块元素,浏览器会自动地在段落的前后添加空行。
换行标签:<br>
空元素,用于在HTML页面中产生换行。
HTML文档中的多个空格和换行在HTML页面中显示时都会被视作一个空格来显示。
HTML文本格式化
加粗:<b>、<strong>
两个标签都能实现加粗文本的效果,但是<b>只是单纯的定义粗体文本,而<strong>则表示重要文本
斜体:<i>、<em>
两个标签都能实现斜体文本的效果,但是<i>只是单纯的定义斜体文本,而<em>则表示重要文本
文本格式化标签:
<b>、<strong>、<i>、<em>
上标:<sup> 下标:<sub>
放大:<big> 缩小:<small>
删除文字:<del> 插入文字:<ins>
"计算机输出"标签:
电脑输出:<code> 键盘输出:<kbd>
打字机文本:<tt> 计算机代码样本:<samp>
计算机变量:<var> 预格式文本:<pre>
引文,引用,及标签定义:
地址:<address>
缩写:<abbr> 首字母缩写:<acronym> 属性title
文字方向:<bdo> 属性dir
短引用:<q> 长引用:<blockquote>
引用、引证:<cite> 定义项目:<dfn>
HTML链接
链接标签:<a>
<a href="https://baidu.com">百度</a>
链接标签中的内容可以是字、词、图像等,通过点击这些内容来跳转到一个新的文档或文档的某个部分。
链接的默认样式:(样式可通过CSS自定义)
1.未被访问过的链接显示为蓝色带下划线
2.访问过的链接显示为紫色带下划线
3.点击链接时,链接显示为红色带下划线
链接标签的属性:
- href=“url”,url为链接的地址
- target="_blank",定义链接以何种方式打开
- id属性,创建一个HTML文档书签,可以链接跳转到文档的指定位置
创建电子电子邮件链接:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
发送邮件</a>
HTML头部
<head>标签,包含了所有的头部标签元素,在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
<head>标签内可以嵌套的标签有:<title>、<base>、<meta>、<link>、<style>、<script>
- <title>标签定义文档的标题
- 浏览器工具栏的标题
- 网页被收藏时显示的标题
- 在搜索引擎结果页面的标题
<title>文档标题</title>
- <base>标签描述了基本的链接地址/链接目标,作为HTML文档中所有链接标签的默认链接和默认打开方式。
<base href="http://www.runoob.com/images/" target="_blank">
- <link>标签定义了文档于外部资源之间的关系
<link rel="stylesheet" type="text/css" href="mystyle.css">
- <style>标签定义了HTML文档的样式(CSS)
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
- <script>标签用于加载脚本文件(JS)
<script type="text/javascript">
</script>
- <meta>标签描述了一些基本的元数据,网页描述、关键词、作者等
元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
网页关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
网页描述:
<meta name="description" content="免费 Web & 编程 教程">
网页作者:
<meta name="author" content="osmundZ">
每30秒刷新当前页面:
<meta http-equiv="refresh" content="30">
HTMLCSS
CSS是用于渲染HTML元素标签的样式。
CSS在HTML中的使用方式:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件(最好的方式)
HTML图像
图像标签:<img>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
图像标签的属性:
- src属性:图像来源,存储图像的位置
- alt属性:图像无法显示时的替代文本
- width/height:图像宽/高
- title属性:鼠标放在图像上时显示的文本
HTML表格
表格标签:<table>、<tr>、<td>、<th>、<caption>、<colgroup>、<col>、<thead>、<tbody>、<tfoot>
<table border="1">
<caption>表格</caption>
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
</table>
HTML列表
- 无序列表:<ul>、<li>
- 有序列表:<ol>、<li>
- 自定义列表:<dl>、<dt>、<dd>
HTML区块
HTML元素可以分为块级元素和内联元素,块级元素会以新行来开始(和结束),而内联元素则不会。
<div>为块级元素,没有特别的含义,用于嵌套其他HTML元素,当作一个容器来使用,便于页面布局和设置样式。
<span>为内联元素,也没有什么特别的含义,用作文本的容器,便于为部分文本设置样式。
HTML布局
- 使用<div>元素
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>HTML<br>CSS<br>JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
- 使用<table>元素
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>
这样的布局方法,现在基本上不会用了,一般都使用CSS样式来进行布局。
HTML表单
表单标签:<form>
- 表单–输入元素
文本输入:<input type="text">
密码输入:<input type="password">
单选按钮:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
复选框:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
提交按钮:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
- 表单元素:
标签 | 描述 |
---|---|
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义了 <input> 元素的标签,一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素,并使用外框包含起来 |
<legend> | 定义了 <fieldset> 元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist> | 指定一个预先定义的输入控件选项列表 |
<keygen> | 定义了表单的密钥对生成器字段 |
<output> | 定义一个计算结果 |
HTML框架
框架标签:<iframe>
通过框架标签,你可以在一个页面中嵌入更多的页面。
<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>
框架标签的属性:
- frameborder 属性,是否显示边框
- src属性,目标链接
HTML颜色
颜色表示法:
- 十六进制:#000000
- RGB:rgb(0,0,0)
- 颜色名:red
HTML脚本
脚本,即JavaScript。脚本使得HTML页面具有更强的动态和交互性。
脚本标签:<script>
<script>
document.write("Hello World!");
</script>
<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>
HTML URL
URL:统一资源定位器。
Web浏览器通过URL从Web服务器请求页面。一个标准的URL:
scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机(http 的默认主机是 www)
domain - 定义因特网域名,比如 runoob.com
:port - 定义主机上的端口号(http 的默认端口号是 80)
path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
filename - 定义文档/资源的名称
XHTML
XHTML是以XML格式编写的HTML。
XML是一种必须正确标记且格式良好的标记语言,在HTML中的一些规范格式在XML语言中是强制的。如:标签必须小写、元素必须有关闭标签等。