HTML学习总结

最新推荐文章于 2024-06-19 01:21:22 发布

twh6666

最新推荐文章于 2024-06-19 01:21:22 发布

阅读量1w

点赞数 31

分类专栏： study 文章标签： HTML

本文链接：https://blog.csdn.net/twh6666/article/details/79489024

版权

study 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

用两天的时间将HTML学完，整理一下笔记。由于是在边学习时边记的笔记，只记录了自己不熟悉的。排版不是很规范，慢慢学习，一步一步来。

一.基础布局

1.文件类型说明

<!DOCTYPE html>

2.HTML文件以<html>开始，以</html>结束。/表示标签结束。

3.<head>,不显示在浏览器上，一般是属性的设置；

<body>，要显示的文章内容

4.段落：<p>

5.注释：

6.换行符：<br>,无结束标签

<hr>,增加一条横线

<pre>:元素中的文本以固定宽度的字体（通常是Courier）显示，并且它保留了空格和换行符。

例：

<DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>this is a heading</h1>
</body>
</html>

二.链接

1.链接：<a>,链接的目的地在href属性指定

<a href="address">this is a link</a>

2.图片:img,源文件(src),替换文件(alt)(在无法显示时打开），宽度和高度

<img src="address" alt="imgname" width="100" height="142">

3.图片为链接：href为要链接到的地址，src为图片地址，alt为名称

</a>

三.属性attribute：

lang="",语言

title,鼠标指到有显示

Attribute	Description
alt	Specifies an alternative text for an image, when the image cannot be displayed
disabled	Specifies that an input element should be disabled
href	Specifies the URL (web address) for a link
id	Specifies a unique id for an element
src	Specifies the URL (web address) for an image
style	Specifies an inline CSS style for an element
title	Specifies extra information about an element (displayed as a tool tip)

四.style：对应标签的CSS属性设置

The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>

style attribute:<tagname style="property:value;">（在对应属性的开头标签里，并不是在head）

background-color;color；记得还有个分号

font-family(字体）；font-size(大小）

text-align(对齐）

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

五．引用quotation

HTML Quotation and Citation Elements

Tag	Description
<abbr>	Defines an abbreviation or acronym（缩写或首字母缩略词） <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction（文本方向） <bdo dir="rtl">This text will be written from right to left</bdo>
<blockquote>	Defines a section that is quoted from another source <blockquote cite="http://www.worldwildlife.org/who/index.html">
<cite>	Defines the title of a work
<q>	Defines a short inline quotation

六．class，id属性：

要定义样式的一种特殊类型的元素，添加类属性的元素，然后定义为与特定类元素的样式

<p class="error">I am different</p>

在<head>

p.error {

color: red;

}

id属性（在internal CSS使用），即在<style>

<style>

#p01 {

color: blue;

}

</style>

<body>

<p id="p01">I am different.</p>

</body>

七．HTML表格

定义HTML表格：

<table>定义

每行<tr>

表头标题<th>

表中数据<td>

增加边框

p {

border: 1px solid powderblue;

边框厚度实线颜色

padding: 30px;

边框宽度

}

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table