首页 / HTML / HTML基础及注意事项
HTML基础及注意事项
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了HTML基础及注意事项，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7246字，纯文字阅读大概需要11分钟。
内容图文
HTML 标签、属性和属性值对大小写不敏感，但推荐使用小写。
属性值应该包括在引号内，单引号、双引号都可以。
标签的属性总是在开始标签中规定。
meta的keyword已被浏览器忽略，无法实现搜索引擎优化(SEO)。
最好只对每个页面使用一次< h1>
目录
标题
通过<h1> - <h6>等标签进行定义。
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
段落
通过<p>标签进行定义。
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<pre>
This is
a paragraph.
</pre>
链接
通过<a>标签进行定义，可以链接外站（一定要写http），也可以链接到本站的其它网页（~.html）。
<a href="http://www.w3school.com.cn" title="鼠标放上去的提示" target＝"_brank">This is a link</a>
<a href="#id">链接到本页的id部分</a>
<a href="other.html#id">连接到其他页面的id部分</a>
<a href="mailto:123@123">给123@123发邮箱</a>
<a href="mailto:">跳转到邮箱</a>
图像
通过<img>标签进行定义。
源属性src的值是图像的 URL 地址
alt属性用来为图像定义一串预备的可替换的文本,在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
<!--同级-->
<img src="p.jpg" width="104" height="142" alt="Big Boat"/>
<!--图片在同级的文件夹里-->
<img src="images/p.jpg" width="104" height="142" alt="Big Boat"/>
<!--图片在上一级-->
<img src="../p.jpg" width="104" height="142" alt="Big Boat"/>
< figure> 可以是几张图片、一段代码、音视频、方程、表格或别的，< figcaption>显示内容的描述。
<figure>
<img src="images/banner.jpg" title="爱哭的小女孩">
<figcaption>kongbutongyao</figcaption>
</figure>
响应式图片：srcset/sizes/< picture> 用于美术设计或分辨率切换
表格
通过<table>标签进行定义。
<table border="1"> <!-- border为外边框宽度，=0时无边框 -->
<caption>我的标题</caption>
<tr>
<th>姓名</th> <!-- 表头 -->
<th colspan="2">电话</th> <!-- rowspan -->
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td> </td> <!-- 空 -->
<td>600</td>
</tr>
</table>
列表
有序列表
<ol start="3"> <!-- tpye="A","a","I","i" -->
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
无序列表
<ul type="disc"> <!-- tpye="circle","square" -->
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
定义列表(description list，项目及其注释的组合)
一个项目可以有多个描述
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
style 属性
用于改变 HTML 元素的样式
可代替标签<center>, <font>和<basefont>, <s>和<srtike>, <u>, 属性align，bgcolor，color
<html>
<body style="background-color:PowderBlue;">
<h2 style="background-color:red;text-align:center">This is a heading</h2>
<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>
<p style="font-family:times;color:green">
This text is in Times and green</p>
<p style="font-size:30px;background-color:green">This text is 30 pixels high</p>
</body>
</html>
文本语义化
< em>强调 < strong>加重语气
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
< acronym>舍弃
<time datetime="2016-01-20">2016年1月20日</time>
<abbr title="etcetera">etc.</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<br />
<bdo dir="rtl">This text will be written from right to left</bdo>
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> <!-- 定义页面的描述 -->
<meta name="keywords" content="HTML, CSS, XML" /> <!-- 定义页面的关键词 -->
<title>Title of the document</title>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<body>
The content of the document......
</body>
</html>
分类块级元素
<div>
<!DOCTYPE html>
<html>
<head>
<style>
<!-- 定义类 -->
div.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
<p>Situated on the Seine River, it is at the heart of the 蝜e-de-France region, also known as the r間ion parisienne.</p>
<p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p>
</div>
</body>
</html>
分类行内元素
<!DOCTYPE html>
<html>
<head>
<style>
span.red {
color:red;
}
</style>
</head>
<body>
<h1>我的<span class="red">重要的</span>标题</h1>
</body>
</html>
字符实体
看参照手册
实体名称对大小写敏感！
空格
表单
注意单选框选项组的name属性需要一致。
<form action="数据处理网页">
账户：<input type="text" name="userName" placeholder="Search" />
<br />
密码：<input type="password" name="userPsd" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<br />
性别：
男<input type="radio" value="male" name="gender" checked="checked" />
女<input type="radio" value="female" name="gender"/>
<br />
爱好：
<input type="checkbox" value="1" name="music" checked="checked" />音乐
<input type="checkbox" value="2" name="sport"/>体育
<input type="checkbox" value="3" name="read"/>阅读
<br />
<select>
<option>看书</option>
<option selected="selected">旅游</option>
<option>运动</option>
<option>购物</option>
</select>
<br />
<textarea rows="10" cols="50">在这里输入内容...</textarea>
</form>
音频
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>
controls代表控制条；支持.mp3 .wav .ogg格式
audio标签支持所有video标签拥有的特性
视频
.mp4和.webm格式可以支持大部分浏览器。
<video controls width="400" height="400" poster="images/Latte.jpg">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
视频会保持原始的纵横比，未被填充部分显示背景色。
其他属性：autoplay自动播放 loop循环播放 muted默认静音 poster封面图 preload缓冲方法，用于大文件 < track>显示音轨文本
canvas画布
需与JS结合使用
涂鸦板实例：（JS只能外嵌，且要放在画布定义下面，否则无法涂鸦）
<body>
<canvas id="myCanvas" width="860" height="480">浏览器不支持</canvas>
<script src="canvas.js" type="text/javascript"></script>
</body>
var canvas, pen;
//获取canvas
canvas = document.getElementById('myCanvas');
//获取绘图上下文，将来就是用这个上下文在画板上绘制图形
pen = canvas.getContext('2d');
//设置画笔宽度和颜色
pen.lineWidth = 1;
pen.strokeStyle = "blue";
//声明变量，表示鼠标的按下状态,false表示未按下，true表示按下
var mousePress = false;
var last = null;
function pos(event) {
var ex,ey;
ex = event.clientX;
ey = event.clientY;
return {
x: ex,
y: ey
};
}
function start(event) {
mousePress = true;
}
function draw(event) {
if (!mousePress) return;
var xy = pos(event);
if (last != null) {
pen.beginPath();
pen.moveTo(last.x, last.y);
pen.lineTo(xy.x, xy.y);
pen.stroke();
}
last = xy;
}
内容总结
以上是互联网集市为您收集整理的HTML基础及注意事项全部内容，希望文章能够帮你解决HTML基础及注意事项所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。