HTML简单笔记

来源：互联网发布：ltescdma是什么网络编辑：程序博客网时间：2024/06/16 03:57

HTML： Hyper Text Marup Language 超文本标记语言
是一种标记语言（Marup Language），不是编程语言
HTML用标签描述网页

一、html标签：

标签一般成对出现。eg：<a> </a>.。。。。 <a>是开始标签 </a>是结束标签

eg：

<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

例子解释

<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

1.HTML 链接是通过<a>标签来定义。
eg：<a href="http://baidu.com">this is baidu</a>
2.HTML 图像 <img/>
eg:<img src=" pic.jpg" width="100" height="200"/>
3.HTML 标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
实例
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>

4.注释标签 

                 <!-- 注释部分 -->

二、html 属性

常用属性：

属性值描述classclassname规定元素的类名（classname）idid规定元素的唯一 idstylestyle_definition规定元素的行内样式（inline style）titletext规定元素的额外信息（可在工具提示中显示）

1，id 属性

id属性规定HTML的唯一 ID
id在HTML文档中必须是唯一的
id属性可用作链接，通过js或css为带有指定ID的元素定义样式

eg1：通过js 利用id属性改变样式

<html>

<head>

    <script type="text/javascript" >

        function change-header(){

            document.getElementById("FirstHeader").innerHTML="2 hi chunhcun";

    </script>

</head>

<body>

<h1 id="FirstHeader">1  hello chunchun</h1>

<button onclick="change-header()">change header</button>

</body>

</html>

eg2:通过css改变样式
注：#代表id。.代表class

<html>

<head>

 <style>

     #firstheader

         color: yellow;

         width: auto;

         text-align: center;

 </style>

</head>

<body>

<h1 id="firstheader"> hello 3</h1>

</body>

</html>

2.class属性
class属性规定元素的类名
class属性大多数时候用于指向样式表中的类。

注：class 属性不能在以下HTML元素中使用：base，head，meta，param，script，style，title。
类名不能以数字开头，只有ie支持这种写法。

eg：
<html><head><style type="text/css">h1.intro {color:blue;}p.important {color:green;}</style></head><body><h1 class="intro">Header 1</h1><p>A paragraph.</p><p class="important">Note that this is an important paragraph.</p></body></html>
3，style属性
提供了一种改变所有HTML元素样式的通用方法。
可以使用style属性直接改变元素样式，或使用css文件间接进行定义元素格式。
eg1：background-color：定义背景颜色
<html><body style="background-color:yellow"><h2 style="background-color:red">This is a heading</h2><p style="background-color:green">This is a paragraph.</p></body></html>
eg2：font-family、color 以及 font-size 字体系列，颜色，尺寸
<html><body><h1 style="font-family:verdana">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body></html>

eg3：text-align 属性规定了元素中文本的水平对齐方式：
<html><body><h1 style="text-align:center">This is a heading</h1><p>The heading above is aligned to the center of this page.</p></body></html>

三，css

1.外部样式表
当样式需要被应用到很多页面时，使用外部样式表，改变一个文件，可改变一个站点。
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

2.内部样式表
当单个文件需要应用到个别元素时，使用内部样式表。可在head部分通过<style>标签定义内部样式表。
<head><style type="text/css">body {background-color: red}p {margin-left: 20px}</style></head>
3.内联样式表
当特殊的元素需要应用个别元素时，可用内联样式表。直接在相关的标签中使用样式属性
<p style="color: red; margin-left: 20px">This is a paragraph</p>

四.表格

表格由 <table> 标签来定义。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

1,表格的属性：border，空单元格，表头。
具体查阅http://www.w3school.com.cn/html/html_tables.asp
<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>&nbsp;</td><td>row 2, cell 2</td></tr></table>

五，列表

1，无序列表

是一个项目的列表，此列项目列表使用粗体圆点来标记。

无序列表始于<ul>标签，每个列表项始于<li>.

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

2，有序列表

有序列表也是一列项目，列表项目使用数字进行标记。

始于<ol>。每个列表项始于<li>.

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

浏览器显示如下：

Coffee
Milk

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

3，定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl>

浏览器显示如下：
Coffee
Black hot drink
Milk
White cold drink
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

阅读全文

0 0