Home > Article > Web Front-end > HTML study notes one
HTML study notes one
- 不言Original
- 2018-04-19 14:29:401608browse
The content of this article is about HTML learning notes 1, which has a certain reference value. Now I share it with everyone. Friends in need can refer to
Click to open the link to learn the summary.
Commonly used HTML tags and explanations
1. Basic format framework
<html> <body> <h1>标题</h1> <p>段落</p> </body> </html>
2. Text formatting tags
<b>粗体</b> <big>大号字</big> <em>着重字（粗）</em> <i>斜体字</i> <strong>加强语气（粗）</strong> <sub>下标</sub> <sup>上标</sup> <ins>插入字</ins> <del>删除字</del>
3. Link
<a href="URL" target="_blank"> this is a link </a>
Among them, href=hyperlink, target="_blank" means in Open the file in a new window.
Note that there is a space between the two.
There is a special case where the name attribute is used, which can jump to the anchor defined by the name attribute.
<a name="tips">基本的注意事项 - 有用的提示</a> . . . <a href="#tips">跳转到tips标签处</a>
Note that when citing anchors, add # in front of the name.
4. Image
<img src="boat.gif" alt="Big Boat" width="104" height="102" />
Among them, src stores the address of the image;
alt attribute Represents replacement text, that is, the text description displayed when the image cannot be loaded;
width and height are used to set the length and width of the image;
In addition, the image also has an attribute border for Specifies the width of the image border.
5. General method of changing attributes - style
<body style="background-color:yellow"> <h2 style="font-family:arial;color:red;font-size:20px;text-align:center;"> 标题 </h2> </body>
Among them, background-color is used Used to set the background color;
font-family is used to set the font;
color is used to set the (title) font color;
font-size is used to set Font size;
text-align: center.
6. Quote
The first type: is equivalent to "".
<q>所要引用的话</q>
The second type: long quotation, automatic indentation, cite indicates the source address (can be omitted).
<blockquote cite="URL">......</blockquote>
The third type: abbreviation. Putting the mouse on the abbreviation will display the complete content, that is, title.
<abbr title="world health organization">WHO</abbr>
The fourth type: address (contact information), automatically italicized, and automatically added line breaks before and after.
<br/>
<address>我是地址</address>
The fifth type: the title of the work, automatic italics.
<cite>老人与海</cite>
Special, two-way rewriting, dir="rtl" means writing from right to left
<bdo dir="rtl">从右向左</bdo>
7. Computer code
<kbd>键盘输入</kbd> <samp>计算机输出示例</samp> <code>代码</code> <pre class="brush:php;toolbar:false">文本数学公式
Among them, the first three do not retain spaces and line breaks. If you want to keep For the original format of the text, please use the fourth format, e03b848252eb9375d56be284e690e873 to retain line breaks.
8. Create an image map
<html> <body> <p>请点击图像上的星球，把它们放大。</p> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> </body> </html>
Among them, dab9f699790ab0922e596ecb9f6677d5 defines the image map, including The id and name attributes generally need to be defined;
03fc64e1e502d5ba947b3a9af06d2d2adefines the clickable area of the image map, including attributes:
Shape specifies the shape of the area
coords Specify the (x,y) coordinates of the area, the upper left corner is (0,0); for example (x,y,z), xy represents the center of the circle, z represents the radius
# #076402276aae5dbec7f672f8f4e5cc81-------Line break
fa8fd94cc4b4d9671e4ee513ae2a31d1-------Horizontal line
7e3aeece7d701bbec11694f19f8d8878---------Comments
The above is the detailed content of HTML study notes one. For more information, please follow other related articles on the PHP Chinese website!