HTML Basics - Summary of common tags 1

HTML Basics - Summary of common tags 1

  1. Title Tag

    <h1>...</h1>
......
<h6>...</h6>

    Display text in a prominent manner on the page
    characteristic:

    1. The font size changes, h1 is the largest and h6 is the smallest
    2. The fonts are bold
    3. Exclusive row
    4. Vertical distance from top to bottom

    Properties:
    align sets the horizontal alignment of the internal content of the tag. The value is left (default) / center/right

    <h1  align="center">This is the middle alignment of the title</h1>

  2. Paragraph marker

    <p>...</p>

    characteristic:

    1. Exclusive row
    2. Vertical distance from top to bottom

    Attribute: align value: left/center/right

  3. Newline mark < br > or</br>

  4. level

	<hr>or<hr/>

attribute:  size="5px"     The thickness of the horizontal line in px Number in
	   width="50%"    The width of the horizontal line in px Number in/Percent sign
	   alight="left"  Horizontal line, horizontal alignment
	   color="pink"   Horizontal line color
  1. Pre formatted label
    <pre>...</pre> // Can retain carriage returns and spaces in html code
  2. Text style label
// HTML 5 recommends using the following tags
<b></b>     <strong></strong>	// Bold
<i></i>     <em></em>			// Italics
<s></s>     <del></del>			// Delete line
<sup></sup>				    	// Superscript
<sub></sub>					    // Subscript (subscript)

  1. Partition element
    ① Block level partition: < div > < / div > used for page layout
    Features: independent travel
    ② Line partition: < span > < / span > use span when different styles are used for the same line of text
    Features: share one line with other span s, and wrap when one line is full

    1. Inline element
      Elements that can be displayed in one line in a web page
      In the same row, they are arranged from left to right

       ex: span，strong(b)，em(i),del(s)......

    2. Block level element
      An element that has an exclusive row in a web page is a block level element
      The default is top-down

       ex:  div h1~h6 p pre

    In addition to the above element classifications, there are also inline blocks, table s, flex elasticity, etc. (they will be sorted out in HTML5 later)

  2. Image syntax

    1. Basic Usage 
      <img>perhaps<img/>
<img src="Picture path/url">
// url(Uniform Resource Locator) uniform resource locator, commonly known as path
  Expression of path
  ①.Absolute path: full path
	When using network resources, use absolute paths
	ex: https://i0.hdslb.com/bfs/feed-admin/0482b90f8ae088139717dd81f900010b57f7a528.png@880w_388h_1c_95q
	Communication protocol://Host name / file directory structure / file name
	Advantages: no local storage
	Disadvantages: unstable
	Use local resources, use absolute paths, and projects are not allowed to use them (because the drive letter content of each networked device is different)
  ②.Relative path
	There should be references that can access the resources HTML file
	1.Sibling relationship (parallel relationship in the same folder),Write file name directly
	2.Subset directory (preferably'/',Do not use'\')
		First enter the brother folder, and then import the pictures ex: src="Brothers folder/Full picture name"
	3.Parent directory: Using../Return to parent directory ex: src="../Parent file name/Full file name"
    2. attribute
      <img src="" alt="" width="" height="">
src:source Source set resource path
alt: Realistic text when an error occurs in the picture resource
width,height: Set the height and width of the picture
 If the aspect ratio is set,It does not conform to the aspect ratio of the picture itself, and the picture will be distorted,Generally, only one side of the value is set, and the other side is adaptive according to the image style scale

  3. Link syntax

    1. Basic Usage
      Connections are usually attached to some special tags, with the attribute name href followed by the path address. The most typical is in the a tag
      1.Download resources
	<a href="Address name">Displayable name</a>
2.open teh mailbox
	<a href="mailto:Mailbox name">name</a>
3.Return to the top of the page
	<a href="#"> return to the top of the page</a>
4.use a Tags, executing js
	<a href="Javascript:show()">look</a>
	<body>
		<script> function show(){alert(2222222);}</script>
		<a href="javascript:show()">look</a>
	</body>
    2. Anchor point
      • effect
        An anchor is a mark made on the page. You can click the a tab to jump to this mark and briefly describe it as a mark
      • Specific use
        1.Define anchor   //Mark
	1.h4 Scheme of<a name="Anchor name"></a>
	2.<any id="Anchor name"> 
2.use a Label jump to anchor  // Jump to this tab
      <a href="#Anchor name "> jump with label</a>
3.use a Label jump to any html Page anchor   // Jump to different tabs
      <a href="Relative path#Anchor name "> jump between different labels</a>
  1. form
    1. Basic Usage
      < Table > < / Table > table
      Table feature: table reads data into memory at one time, and then renders them one by one (from left to right, from top to bottom)
      < tr > < / TR > row – table row
      <td>< / td > one data in the row – table data

      Note: in table, all data are written in td

      	<table> <!--Row by column-->
		<tr>
			<td>Data 1</td>
		</tr>
	</table>
	
	<table> <!--One row and two columns-->
		<tr>
			<td>(1,1)</td>
			<td>(1,2)</td>
		</tr>
	</table>
	
	<table> <!--Two rows and two columns-->
		<tr>
			<td>(1,1)</td>
			<td>(1,2)</td>
		</tr>
		<tr>
			<td>(2,1)</td>
			<td>(2,2)</td>
		</tr>
	</table>
    2. attribute

      1. Attributes of the table element

         border="2px" Sets the outermost border of the table
 width="150px" Set table width
 height="200px" Set table height
 align="center" Sets the horizontal alignment of the table itself relative to the viewport left/center/right
 bgcolor="pink"  background color 
 bordercolor="red"  Border color
 cellpadding="50px" Sets the inner margin of the cell(The distance from the collection of all inner borders to the outer border)
 cellspacing="20px" Sets the outer margin of the cell(The distance between the inner borders)
 cell: Cells, small rooms

      2. Properties of tr:

         align: Alignment for internal elements(Is the alignment of the internal relative space)
 align="right" Sets the horizontal alignment of table contents      horizontal alignment horizontal alignment
   Value: right/center/left         Note: not here halign 
 valign="top" Sets the vertical alignment of table contents       vertical alignment Vertical alignment
   Value: top/middle/bottom

      3. Properties of td:

        width: Setting the cell width will affect the cell width of other rows at the same position
height: Setting the cell height will affect the cell length of other columns at the same position
align="right" Sets the horizontal alignment of the contents of a single table    Value: right/center/left
valign="bottom" Sets the vertical alignment of the contents of a single table    Value: top/middle/bottom
bgcolor="blue" Sets the background color of the cell

      4. Irregular table
        ① . column span span (column span)
        Start from the specified cell and merge cells horizontally to the right. n from the specified cell (including yourself), the merged cells will be deleted
        ② . rowspan span (row span)
        Merge cells vertically and downward from the specified cell. n from the specified cell (including yourself), the merged cells will be deleted

      5. Options in the table
        ① < caption > < / caption > name the title of the table immediately after the < Table > label
        ② < th > < / th > instead of td, the content font is bold and centered
        ③ Table element expansion (for more convenient table layout)

        <table>

	<thead> Header
		<tr>...</tr>
	</thead>
	
	<tbody> Table body
		<tr>...</tr>
	</tbody>
	
	<tfoot> Footer (footer)
		<tr>...</tr>
	</tfoot>
	
</table>
  1. list
    1. Let the data be displayed in an orderly way, and add identification before the data
      But now page layouts often use unordered lists
    2. Basic usage
      1. Ordered list
        <ol>
  <li>...</li>   <!--list item-->
	...
</ol>

        1. Properties:
          Type: sets the type of the list

          Value: 1(Default value)
          A  a The identification item is a letter
          I   i The identification item is Roman numeral

          start: sets the initial value of the identification item

      2. Unordered list
        <ul>
  <li>...</li>   <!--list item-->
	...
</ul>

        1. attribute
          Type: sets the identification type of the list item

           Value:	disc  solid 
 		circle  Hollow circle  
 		square square  
 		none  nothing

ul is frequently used in projects and is often used for layout and typesetting of a group of similar content

  1. Structure mark
    1. Function:
    As like as two peas for h5, a number of structural tags have been put forward, instead of div, which are similar to Div.
    2. Common structural marks
    1.<header></header>     Define the header of a web page or a region
2.<footer></footer>     Define the bottom of a page or an area
3.<nav></nav>           Define the page navigation bar (below the header)
4.<section></section>   Define the main content of the web page (the original main part is divided into two parts, section (on the right)
5.<aside></aside>       Define the sidebar (the original body part was divided into two parts, aside (on the left)
6.<article></article>   Define text related content ex:forum/Reply/comment

Keywords: html5 html css

Added by bluegreen1 on Sun, 05 Sep 2021 06:18:06 +0300

Popular Keywords

©2024 Programming VIP