Web前端开发基础技术需要
- HTML:网页内容的载体
- CSS:样式是表现
- JavaScript:实现网页上的特效效果
<html>
<head>...</head>
<body>...</body>
</html>
html标签
- 由< >括起来
- 成对出现:开始标签(<html>)、结束标签(</html>)
- 不区分大小写
- 标签可以嵌套
作用(语义化):
- 更容易被搜索引擎收录
- 更容易让屏幕阅读器读出网页内容
常用标签
- <html>根标签(存放所有网页标签)</html>
- <head>头标签(头部元素:描述了文档的各种属性和信息)</head>
- <body>主体标签(网页内容标签:网页上显示的内容)</body>
- <!--注释文字 -->
头部元素
- <title>网页标题</title>
- <script></script>
- <style></style>
- <link></link>
- <meta></meta>
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
网页内容标签
- <hx>标题标签</hx>(x为1~6)
- <p>段落标签</p>
- <pre>多行代码语言(保留空格和换行符)</pre>
- <em>斜体标签</em>
- <strong>粗体标签</strong>
- <q>短引用文本</q>
- <blockquote>长文本引用</blockquote>
- <address>联系地址信息</address>
- <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
- <a href="目标网址" target="_blank">click here!</a>//打开显示浏览器
- <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
- <img src = "myimage.gif" alt = "My Image" title = "My Image" />
- <code>单行代码语言</code>
- <ul> <li>无序列表</li> </ul>
- <ol> <li>有序列表:默认从1开始</li> </ol>
- <li>列表项</li>
- <table>表格标签</table>
- <tbody>表格体</tbody>
- <tr>表格的一行</tr>
- <td>表格的一个单元格</td>
- <th>表格表头</th>
- <table summary="表格简介文本">
- <table> <caption>标题文本</caption> <tr> <td>…</td><td>…</td> </tr></table>
- <span>设置单独的样式</span>
- <div>...容器,放独立的逻辑,存放相关联的部分,划分独立的版块</div>
- <div id="版块名称">命名,使逻辑更清晰</div>
- <style type="text/css">table tr td,th{border:1px solid #000;}</style>
空标签:
- 回车换行<br />(xhtml1.0)或<br>(html4.01)
- 水平横线<hr />(xhtml1.0)或<hr>(html4.01)
- 图片<img src="img标签.jpg">
- 空格
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网页标题标签</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<h1>标题文本,h1~h6,h1最大</h1>
<p>段落文本,段前后有空格
<em>强调文本</em>
<strong>强调文本</strong>
<span>斜体文本</span>
<q>短引用文本</q>
<blockquote>长引用文本:缩进</blockquote>
空格 空格
</p>
<img src="1.jpg" >
</body>
</html>