html基础

来源：互联网发布：钟恩淇的淘宝店怎么样编辑：程序博客网时间：2024/06/06 03:19

1、调字体大小、颜色、位置

font-size:13px;
color:#930;
text-align:center;

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Html和CSS的关系</title><style type="text/css">h1{ font-size:13px;    color:#930; text-align:center;}</style></head><body><h1>Hello World!</h1></body></html>

<p style="color:red;font-size:10px;font-family:Arial">But the bear got hungry and ate the duck.</p>   //设置字体，字体大小，字体颜色

<body style="background-color:brown">   //设置背景色

<h1 style="text-align:center">  //调整位置

2、基本标签

<hx></hx>就是标题标签(x一般为1—6)

<p></p>是段落标签

图片代码写成<img src="1.jpg">

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html标签</title></head><body>    <h1>勇气</h1>    <p>三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>    <p>到了三年级下学期时，我们班上了一节公开课，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>    <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></body></html>

<em> 默认用斜体表示

<p>I am <em>so</em> tired.</p>

<strong> 用粗体表示

<p>No I don't. I'm <strong>too</strong> busy eating cake.</p>

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>了不起的盖茨比</title><style>span{    color:blue;}</style></head><body>    <p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p></body></html>

<q></q>实现引用，双引号

引用文本比较长，所以使用<blockquote>，缩进

<br />标签作用相当于word文档中的回车

空格，必须写入 

<hr />，分隔线

<address></address>地址标签，默认斜体

<code></code>插入单行代码，多行的时候用<pre></pre>

ul-li添加新闻列表，默认每个li前带一个圆点,无序列表

<ul>  <li>信息</li>  <li>信息</li>   ......</ul>

ol-li添加有序列表，默认每个li前带一个标号，从1开始

ol>   <li>信息</li>   <li>信息</li>   ......</ol>

<div>标签的作用就相当于一个容器。命名<div id="版块名称">…</div>

表格：

整个表格以<table>标记开始、</table>标记结束，默认无表格线

使用<thead><tbody>让表格看起来更像表格

<tbody>…</tbody>：当表格内容非常多时如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。

<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

<td>…</td>：表格的一个单元格，

<th>…</th>：表格的头部的一个单元格，表格表头，默认粗体且居中显示

<table>  <tbody>    <tr>      <th>班级</th>      <th>学生数</th>      <th>平均成绩</th>    </tr>    <tr>      <td>一班</td>      <td>30</td>      <td>89</td>    </tr>    <tr>      <td>二班</td>      <td>35</td>      <td>85</td>    </tr>     <tr>      <td>三班</td>      <td>32</td>      <td>80</td>     </tr>  </tbody></table>

<span style="white-space:pre"></span><table border="1px">            <thead>                <tr>                    <th>Famous Monster</th>                    <th>Birth Year</th>                </tr>                </thead>            <tbody>                <tr>                    <td>King Kong</td>                    <td>1933</td>                     </tr>                                <tr>                    <td>Dracula</td>                    <td>1897</td>                </tr>                                <tr>                    <td>Bride of Frankenstein</td>                    <td>1935</td>                </tr>            </tbody>        </table>

设定长度

<th colspan="2">Famous Monsters by Birth Year</th>

给table添加边框

<style type="text/css">table tr td,th{border:1px solid #000;}</style>

表格摘要，<table summary="表格简介文本">，仅在代码中，实际不会显示出来

表格标题，<caption></caption>，默认居中

<table>    <caption>标题文本</caption>    <tr>        <td>…</td>        <td>…</td>        …    </tr>…</table>

链接到别的网址，用a标签，加入a标签的文字默认为蓝色，点击后在当前浏览器打开

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

新的浏览器窗口中打开，加target="_blank"

例：<a href="目标网址" target="_blank">click here!</a>

链接中加mailto点击发送邮件，如下,第一个地址为发送地址，cc为抄送地址，bcc为秘密抄送地址，不管有没有cc、bcc，发送地址后均加？，subject为主题文字，body为内容文字：

<a href="mailto:yy@imooc.com?cc=xiaomin@126.com&bcc=xiaoyu@126.com&subject=观了不起的盖茨比有感&body=你好，对此评论有些想法">对此影评有何感想，发送邮件给我</a>

<img>标签来插入图片，<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">，title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

在div上加一个链接，使它能连到其它网站

<a href="www.baidu.com"><div style="width:50px; height:50px; background-color:yellow"></div></a>

使单个字母或单词变色，可以用span

<p>This text is black, except for the word <span style="color:red">red</span>!</p>

<!DOCTYPE html><html><head><title>Ye Olde Fancye Booke</title><link type="text/css" rel="stylesheet" href="stylesheet.css"/></head><body><h3>Ye Olde Storye</h3><p><span>A</span> long time ago there was an intrepid young student who wanted to learn CSS...</p></body></html>

p {font-family:Garamond;font-size:16px;}h3 {font-family:cursive;color:#36648b;text-align:center;}span {color:#cc0000;font-size:24px;}

3、html基础文件构成

<html>    <head>...</head>    <body>...</body></html>

<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。

<head>    <title>...</title>    <meta>    <link>    <style>...</style>    <script>...</script></head>

在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

4、注释

0 0