HTML

Article directory

HTML

image tag

quote image

The first case: Internet pictures, directly use the Internet picture address

<img src="http://img.mobiletrain.org/omlinerjcs.png">

In the second case, refer to a picture in a folder on the local disk

<img src="C:\hello.png">

Page files and image files are at the same level, you can omit the path and use the image name directly
The page file and the folder where the picture is located are at the same level. First write the name of the folder where the picture is located, and then use / to enter the folder and find the picture file
The folder where the page is located and the picture are in the same level relationship, first return to the upper level of the folder where the page is located, .../

image tag attribute

alt="Qianfeng Education" Displayed when the picture fails to load
title attribute:
- Defined content does not occupy page space
- Hidden by default, only displayed when the mouse is drawn

Hyperlink

The value of href is the address of the target page, which is similar to the image src attribute, and the content of the tag pair is the content displayed on the page

<a href="目标页面地址" target="_self">显示在页面中的文本</a>

target="self" indicates that the target of the link is opened in the current window, and _blank indicates that it is opened in a blank page

text decoration

<b>加粗的文本<b>

<strong>加粗的文本</strong>

The b tag is only for bolding the text, and the strong tag is more semantic, indicating that the text is more important
<i>倾斜的文本</i>

<em>倾斜的文本<em>
<s>删除线文本</s>HTML5 does not support

<del>删除线文本</del>
<u>下划线文本</u>
<sup>上角标文本</sup>

<sub>下角标文本</sub>

the list

ordered list (order list)

<ol type="" start="">
  <li>列表项内容</li>
</ol>

type value: A, a sequence of English letters, I, i sequence of Roman numerals, 1 sequence of Arabic numerals

The value of start is the starting number serial number

Unordered list (unorder list)

<ul type="">
    <li>...</li>
</ul>

type:

disc: solid dot
circle: hollow dot
none: none
square: solid square

custom list

<dl>
    <dt></dt>
    <dd></dd>
    <dd></dd>
</dl>

dt or dd tags cannot be used independently of dl

quick build

Label name {label text content}+tab or enter key
Label ${标题文$本内容}*label repetitions
parent tag name>child tag name{sub tag text}*sub tag repetition times

sheet

Base

<table>
    <tr>
        <td></td>
        <th>加粗的文本</th>
    </tr>
</table>

tr represents a row, td represents a cell, and the number of td in each tr in an ordinary table is equal

The text inside the th tag is bold and centered

Form properties

border: defines the line thickness.<table border="1">
cellspacing: Defines the distance between cells.
cellpadding: defines the distance between the cell border and the text

If you want to increase the distance between cells, or the distance between cells and text, just adjust the attribute values of the two spacing

table row properties

align (horizontal alignment) <tr align="" valign="">:
- left: align to the left
- center: center alignment
- right: align to the right
valign (vertical alignment):
- top: top alignment
- middle: center alignment
- bottom: bottom alignment
bgcolor: Modify the background color of the table.
bordercolor: modify the border color of the table.

cell properties

rowspan: Merge across rows

<td rowspan="4"></td>

Indicates that the cell needs to occupy the space of 4 cells vertically
colspan: Merge across columns

Table headings and structural grouping

Table titles are usually placed before the first tr tag

<table>
    <caption>标题</caption>
    <tr></tr>
</table>

In the thead tag, place the content of the corresponding table header tr line. The tbody tag is also a subtag of the table tag at the same level as the thead tag. All ungrouped tr in the table will be placed in a tbody, and the corresponding table footer will be placed in the tfoot tag. The content of the first tr row, a table only allows one thead and one tfoot, but allows multiple tbody

<table>
    <thead></thead>
    <tbody>
        <tr>
           <td>内容</td>
           <td>内容</td>
           <td>内容</td>
        </tr>
        <tr>
           <td>内容</td>
           <td>内容</td>
           <td>内容</td>
        </tr>
        <tr>
           <td>内容</td>
           <td>内容</td>
           <td>内容</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

l The column grouping label is colgroup. Column grouping is often used to define the color of an entire column of cells in a table. It means how many columns are divided into one group. If you need to divide multiple groups, you need to use multiple colgroups

<colgroup span="3"></colgroup>

Color Values and Length Units

Represent color value method:

Color name : use the English word for the color to define the color value
- 140 standard English names must be used
- Chinese characters cannot be used as color values
Hexadecimal value : refers to using the form of #RRGGBB to define the color value

RR (red) GG (green) BB (blue) color intensity between 00-FF

Example: #0000FF is displayed in blue
- # don't throw away
- all lowercase letters
- All browsers support
RGB value : refers to the use of RGB (red, green, blue) to define the color value (integer in 0-255)
- not case sensitive
- There can be spaces before and after numbers in parentheses and commas
- All browsers support

Length unit:

Absolute length units: Fixed, the length expressed in these units will be displayed as the set size.

px (pixel)
Relative unit length: refers to the length calculated relative to a length, generally used to adapt to different devices

percentage(%)

Block-level elements and inline elements

HTML elements—display value—block block/inline

Block-level elements:

Blocking element: div (the tag contains the content of the block)
Heading elements h1-h6
paragraph element<p>
list element<ol> <ul> <li> <dl> <dt> <dd>
form element<table> <tr> <td> <th> <thead> <tfoot> <caption>

Inline elements:

Link element:<p>
Text modifier elements:<b><em><i><strong><sub><sup>
Wrap element:<br>
Image element:<img>
Range element:<span>

form

<form></form>

text box and password box

Single line textbox:

<input type="">

type="text" or type="password" password box, the default text single-line ordinary text box

multiline text box

Allows the user to enter multiple lines of text. The text will automatically wrap when it reaches the right border. When the text exceeds the bottom border, a scroll bar will be generated. You can scroll the mouse to view the complete information.

<textarea cols></textarea>

You can set the width and height of the display area. cols is used to specify the visible width of a text area

Value button type

single and multiple choice

Set the type attribute value of the inpt tag, radio means single choice, checkbox means multiple choice

Radio button controls must be used in groups to make sense, and each group requires at least two radio buttons
Groups are established through the name attribute, and those with the same name value are a group
For the radio buttons in the same group, only one will be selected, and the others will be automatically rendered as unselected

The radio button check box is selected by default, and the checked attribute is defined to achieve it. As long as it is not empty, any character is fine, generally checked

Drop-down menu

<select multiple size=“2>
    <option selected></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

selected is the selected option by default, multiple allows the drop-down menu to select multiple values, and the size attribute can define the default number of visible rows of the control

Select a document

<input type="file">

form label

<form>
    <label for="username"></label>
    <input type="text" id=“username>
    <br>
    您的手机号:<input type="text" value="155****0000" readonly>
    <input type="radio" disabled>
</form>

Label can help us click on the hard-to-click area on the screen, for is used to define the form control associated with the label

readonly read-only control disabled disabled: Disabled form control values will not be collected and sent to the backend, and cannot be selected

form grouping

Form with border and title:

<fieldset>
    <legend>标题</legend>
</fieldset>

The function of the border is to visually divide the relevant fields into blocks. Adding other controls in the group label needs to be placed behind the legend label

form button

value=" " give the button a name

Submit button: Click to confirm the submission information and send the form data to the background function at the same time

<input type="submit">

When the button is clicked:
- The page is refreshed: the data is submitted to the background server, and the background server saves the data to the database, where the server will provide an access address for the form of the webpage
  
  <form action="">
  
  The value is the server address
- The content of the input box disappears
  
  It can also be reserved: define a target attribute for the form (it can be _blank or __self)
- There is a question mark in the browser address bar
Reset button: Clear the content of the input box

<input type="reset">
Normal button:<input type="button">
Image Button: Replaces the appearance of the submit button with an image

<input type="image" src="">

Double label button button:<button></button>

Add type="button" to become a normal button, and the function of submitting the form disappears

Form data collection and form submission

Define the name attribute for the input box. The value of name helps us store the content entered by the user and display it in the address bar. Fill in the server address in the action attribute of the form, and submit the data to the server.

If the data contains sensitive information, it should not be displayed in the address bar. The solution is to define the method attribute (with get and post values) in the form tag.

get is the default value, and the browser will add the collected form data to the server address and submit it to the server.
The post value can not only collect form data, but also not expose private data in the address bar.

Other useful tags

<hr>Indicates a horizontal line, and its function is to draw a horizontal dividing line on the web page.

<hr width="" size="" noshade="" color="" align="">

width/size: Control the width and height of the horizontal line respectively. The default width of the horizontal line is across the entire screen, making it 2px.
noshade: used to remove the horizontal line shadow.
color: used to define the color of the horizontal line.
align: Used to adjust the horizontal alignment of the horizontal line. The default is horizontal center alignment.

<pre>Double tags represent pre-formatted text, and the text will be displayed exactly as in the HTML source code.

<map>Double tags, define an image map, click on different areas of the image to jump to the linked page.

<map name="">
  <area href="" shape="" coords="">
</map>

name is associated with the usemap attribute of the img tag,

The area single label defines the hotspot area on the image, and the position, size and shape of the hotspot area can be set through the area label.

The href attribute is used to define the target address of the link in the hotspot area.
shape is used to define the shape of the region. default: all areas rect: rectangle circle: circle poly: polygon
The coords attribute is used to define the coordinates of the clickable area

iframe

Double tabs are used to display another web page in one web page.

<iframe src="页面路径" width="数字" height="数字" frameborder="0" scrolling="yes"></iframe>

src: used to introduce other website pages
width: used to control the width of the imported page.
height: used to control the height of the imported page.
frameborder: The imported page has a border by default. Usually, the value of this attribute is set to 0 to cancel the border
scrolling: used to control whether to display the scroll bar of the frame

yes: scrollbars are always shown no: scrollbars are never shown auto: scrollbars appear when needed

The address of a link can be the website address of the Internet, or the address of the local page made by oneself, and these pages can be displayed in the iframe

<a href="http://www.baidu.com" target="iframe_a">百度</a>
<iframe name="iframe_a"></iframe>

SVG

SVG is an image format based on XML syntax, i.e. scalable vector graphics. It itself is a text file with a small size, and it will not be distorted no matter how many times it is enlarged. SVG images can be drawn through html. <svg>A tag is a container for an SVG image.

<svg width="" height="">...</svg>

Among them, width and height refer to the width and height of the canvas respectively.

SVG predefined shape elements

draw rectangle

<rect width="" height="" fill="" />

width: defines the width of the rectangle
height: defines the height of the rectangle
fill: define the rectangle fill color
stroke-width: defines the rectangle border width
stroke: defines the rectangle border color
fill-opacity: defines the opacity of the fill color, the legal value ranges from 0 to 1, the smaller the transparency value, the higher the transparency
stroke-opacity: defines the opacity of the stroke color, the legal value range is 0 to 1
opacity: the opacity of the entire element, ranging from 0 to 1

Draw a rounded rectangle

<rect rx="" ry=""/>

If the two values are equal, it is a rounded corner, and if the two values are not equal, it is an elliptical corner.

draw circle

<circle cx="" cy="" r="" stroke="" stroke-width="" fill="" />

cx: Define the x coordinate of the center of the circle
cy: Define the y coordinate of the center of the circle
r: defines the radius of the circle

draw oval

<ellipse cx="" cy="" rx="" ry=""/>

cx: Define the x coordinate of the center of the ellipse
cy: defines the y coordinate of the center of the ellipse
rx: defines the horizontal radius
ry: defines the vertical radius

draw lines

<line x1="" y1="" x2="" y2=""/>

It is formed by connecting the coordinates of two points. The coordinate origin is the upper left corner of the canvas.

draw polygon

<polygon points="220,20 250,190 160,210"/>

points: Define the coordinates of each point, separated by spaces.

draw multiple lines

<polyline points="20,20 40,25 60,40 80,120 120,140"/>

draw path

Applying a path can draw graphics of any shape.

<path d="M150 0 l75 200"/>

d: command used to define the drawing path. like:
- M command (moveto): d="M150 0" means start drawing from the point (150,0)
- L command (lineto): used to draw a straight line, which means drawing a straight line from the last end point to x75, y200
- q command: used to draw a quadratic Bezier curve. q 150 -300 300 0 means the coordinates of the control point are (150, -300), and the coordinates of the end point are (300,0)

g-label

In SVG, g tags can be used to wrap multiple drawing elements, and public attributes can be defined on the g tags.

<g>
   <path />
   <circle />
   <text> </text>
</g>

SVG stroke attributes

<path stroke /> //笔画属性
<path stroke-width />  //笔画宽度属性
<path stroke-linecap />  //笔画笔帽属性
<path stroke-dasharray />  //虚线笔画属性

Blur and shadow effects

filter filter

<defs>
  <filter id>
      <feGaussianBlur stdDeviation="" />
  </filter>
</defs>

feGaussianBlur defines the amount of blur through the stdDeviation attribute, the value is a number, the larger the value, the higher the blur

<filter>
   <feOffset dx="" dy="" in="" />
    <feBlend in="SourceGraphic"/>
</filter>

dx, dy represent the offset of the shadow on the x and y axes
in indicates the source of the shadow image: black SourceAlpha original image SourceGraphic

feBlend blends the shadow image over the original image.

Linear Gradients and Radial Gradients

linear gradient

<defs>
   <linearGradient x1="" y1="" x2="" y2="">
      <stop offset="10%" stop-color="" />
   </linearGradient>
</defs>

y1=y2 x1≠x2 horizontal gradient

x1=x2 y1≠y2 vertical gradient

x1≠x2 y1≠y2 angle gradient

The color range of a linear gradient can be composed of two or more colors, stop defines the color, the offset attribute is used to define the start and end position of the gradient color, stop-color defines the gradient color

radial gradient

<defs>
   <radialGradient id="" cx="" cy="" r="" fx="" fy="" >
       <stop offset="10%" stop-color="" />
   </radialGradient>
</defs>

The id attribute defines the unique name of the gradient, cx, cy, r define the outermost circle, fx, fy define the innermost circle

The full version of HTML for getting started with web front-end development