HTML和CSS之HTML（记录一2015.3.30）

最新推荐文章于 2024-07-17 15:26:15 发布

Aart123456789

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量117

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/emmaBlogs/p/5336228.html

版权

一个网页中包含的基本框架如下：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv ="Content-Type" content = "text/html;charset=utf-8">
        <title>Title</title>
　　　　　<style>
　　　　　</style>
　　　　　<script>
　　　　　</script>
　　　　　<link>
    </head>
    <body>
    </body>
</html>

Html和CSS的关系：

html是网页想要给用户展示的内容，css是内容显示的样式，javascript是可以实现页面间的交互。

html页面上的标签：

<hn></hn>：标题标签；<p></p>段落标签；<img>图片标签。
每一个在浏览器中显示的内容都是在标签中的。
html中的标签都是成对出现的。html标签是不区分大小写的。

html的头部包含有：

<title></title>：标题之间的文字作为网页的标题信息，出现在浏览起的标题栏中。
<meta>
<link>
<script></script>
<style></style>.

标签的用途和标签在浏览器中的默认样式：

语义化：更容易被搜索引擎收录，更容易让屏幕阅读器读出网页的内容。
<body>：网页中需要显示的内容一定要写在<body>中。
<p>： p标签段前段后都有空白。
<hx>：标题标签的样式都会加粗。
<strong>和<em> ：特别强调。<em>表示强调，用斜体表示，<strong>表示更强烈的强调，用粗体表示。
<span>：span标签是没有强调的，它的作用主要是为了设置单独的样式。
<q>：q标签是短文本引用（不是作者本人所写，引用他人的话。要引用的文本不需要加双引号，q标签会自动加上双引号的。q标签的真正关键点不是双引号，而是它的语义是引用别人的话）。
<blockquote>： blockquote也是引用别人的文本，但是它是对长段文字的引用。浏览器对blockquote的引用是有缩进样式的。
<br>： br标签分行显示文本。br是空标签，没有内容的标签就是空标签，空标签只需要写一个起始标签。html中输入回车和空格是没有作用的。
  ：空格标签。
<hr> ：添加水平横线。hr也是空标签。默认样式线条比较粗，颜色为灰色。
<address>：为网页加入地址信息。默认为斜体。<em>强调也是斜体。
<code>：代码标签。如果在文章中需要插入多行代码，一般不用code标签可以使用<pre>标签。
<pre> ：加入大段代码是使用。预格式处理文本。被包围在pre标签中的代码会保留空格和换行的。pre标签不是仅仅为了加入大段代码段使用的，如果网页中需要显示别的预显示格式的都可以使用。一般情况下主要用来显示打断代码。
<ul>和 <li>：添加列表(无序)。默认样式是在每列前面加一个圆点。
<ol>和<li>：列表（有序）。默认样式在每列前面带一个序号，默认从1开始。
<div>：独立的逻辑部分。属性：id身份表示，唯一。
<table>：

<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>

　　　　创建表格的5个元素：table,tbody,tr,th,td

　　　　table:整个表格以table开始。

　　　　tbody：当表格内容很多时，会下载一点显示一点，但是如果添加了tbody则会等表格完全下载完成后再显示。

　　　　tr：一行。

　　　　td：一个单元格。

　　　　th：表格的头部的一个单元格。

　　　　table表格在没有修改样式之前是没有网格线的。表头（th标签）默认是粗体居中。

　　　　caption：为表格添加标题和摘要。

　　　　摘要：摘要的内容是不会显示的，它的作用是增加表格的可读性：<table summary="这是摘要在浏览其中不显示">。

　　　　标题：用于描述表格的内容，在表格的上方：<table><caption></caption><tr><td></td></tr></table>

<a>：语法是：<a href="目标网址" title="鼠标划过显示的文本" target="是否新打开一个页面">链接显示的文本</a>。默认样式为蓝色（被点击过的显示紫色）。如果target为_blank则新打开一个浏览器窗口。
<mailto>：在网页中链接emial地址。如果有多个参数，第一个参数后面必须是？号，后面的是&分割。

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

<img>：在网页中插入图片。语法：<img src="图片的所在的位置" alt=“图片加载失败后显示的文本” title=“提示文本鼠标划过是显示”/>。
<form>表单：<form method="传送的方式" action="服务器文件">。所有表单控件都必须放在form标签内。
文本输入框和密码输入框：

<form>
   <input type="text/password" name="名称" value="文本" />
</form>

<textarea> ：多行文本。<textarea rows="行数" cols="列数"></textarea>。标签之间可以输入默认值。可以用css样式的width替换cols，height替换rows。
复选框和单选框：

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
value：提交到服务起中的值。name：控件名，用户后台使用。checked：设置为checked是默认为选中。同一组单选按钮name一定要一致。

下拉列表：

    <select>
      <option value="看书">看书</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
　　value为向服务器传入的值，如果selected属性设置为selected时则默认为选中。下拉列表也可以多选，在select标签中设置 multiple属性为multiple，select就可以实现多选。

提交按钮：

<input type="submit" value="提交">

重置按钮：

语法：
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字

<label>：为鼠标用户改进了可用性，如果你点击了该文本，浏览器就会自动把焦点转到跟该文本相关的表单控件上。

语法：
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

转载于:https://www.cnblogs.com/emmaBlogs/p/5336228.html

Aart123456789

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS之HTML（记录一2015.3.30）

一个网页中包含的基本框架如下：<!DOCTYPE HTML><html> <head> <meta http-equiv ="Content-Type" content = "text/html;charset=utf-8"> <title>Title</tit...
复制链接

扫一扫