Web 基础

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>
            空格&nbsp;空格
        </p>
        <img src="1.jpg" >
</body>
</html>

Web前端开发基础技术需要

网页内容标签

猜你喜欢