Start with HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
Common tags for HTML
<h> To define the title, there are six levels, and the title decreases from one to six
<p>To define the paragraph
< strong > used for bold font
<em>Tilt
< div > as a big box
<span>For small boxes
<br>To pause as a single label
< img > to insert a picture. Note to specify the level of the page where the src is optimistic about the picture
There are attributes in img
- alt defines the text that cannot be displayed in the picture
- title defines the text displayed when the mouse is placed on the picture
- Width specifies the width
- Height specified height
<a>It is used for hyperlink attention href to specify text, pictures and links
target defines how the web page is opened
="- self" opens itself
="- blank" new page opens
Table label
There are big table s and small tr, td, th
- tr to specify row td to specify column th to center bold
There are also attributes
- align defines the alignment with center left right
- Border defines the border
- Techniques for merging cells across rows rowspan across columns colspan
- More importantly, it is specified from the first cell.
List label
Lists are divided into unordered, ordered and custom
- Ordered 123
- Disorder
- ul for disorder and ol for order
- But they all have something in common. Other labels can be placed in li li
Custom lists have special
Parents use dl and children use dt
Form label
3 parts
- Form field
- form control
- Prompt information
1, Form field
<form action="url address" method="Submission method" name="Form field name"> Various form element controls </form>
2, Form element
input
format
type attribute
- Text text box
- Hidden hidden input clip
- Button defines the clickable button
- Password defines the password
- radio dot
- checkbox check box
- Name is used to select more than one name. Please specify the same name
- submit button
- value prompt text when used in text box
- checked is selected for the first time
- maxlength maximum length of characters
- resist reset
- Color color
- Date defines the date of a time controller
- email defines the message
- Number enter the number format
- tel enter phone format
- url input url format
- Search search box
- range auto drag slider
- time hours, minutes
- datatime time
- Month month year
- week year
Several new attributes
Drop down list
< Select > cell table drop-down list
<select> <option>~~</option> <option>~~</option> </select>
Text field: < textarea > < / textarea >
A web page learned and completed this week
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<h4>
Youth doesn't often exist. Hurry up and fall in love
</h4>
<!-- first line -->
<tr>
<td>Gender</td>
<td> <input type="radio" name="c" checked="checked">male<input type="radio" name="c"> female </td>
</tr>
<!-- Second line -->
<tr>
<td>birthday</td>
<td><select>
<option>--Please enter year--</option>
<option>2021</option>
<option>2020</option>
<option>2019</option>
<option>2018</option>
<option>2017</option>
<option>2016</option>
<option>2015</option>
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
</select>
<select>
<option>--Please enter month--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option>--Please enter the day--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
</td>
</tr>
<!-- Third line -->
<tr>
<td>Location</td>
<td><input type="text"><br></td>
</tr>
<!-- Fourth line -->
<tr>
<td>marital status</td>
<td><input type="radio" name="a">unmarried<input type="radio" name="a"> married<input type="radio" name="a"> divorce </td>
</tr>
<!-- The fifth line -->
<tr>
<td>education</td>
<td><input type="text"></td>
</tr>
<!-- Line 6 -->
<tr>
<td>Favorite type</td>
<td><input type="checkbox" name="b"> Charming <input type="checkbox" name="b"> lovely <input type="checkbox" name="b"> little fresh meat
<input type="checkbox" name="b"> Old Bacon <input type="checkbox" name="b"> I like all of them </td>
</tr>
<!-- Line 7 -->
<tr>
<td>self-introduction</td>
<td> <textarea>self-introduction</textarea></td>
</tr>
<!-- Line 8 -->
<tr>
<td></td>
<td><input type="button" value="Free registration"></td>
</tr>
<!-- Line 9 -->
<tr>
<td></td>
<td><input type="checkbox">I agree with the terms of registration and membership criteria</td>
</tr>
<!-- Line 10 -->
<tr>
<td></td>
<td> <a href="#"> I'm a member, log in now</a></td>
</tr>
<tr>
<td> </td>
<td>
<h4>I promise</h4>
</td>
</tr>
<tr>
<td></td>
<td>
<ul>
<li>Over 18 years old, single</li>
<li>Take a serious attitude</li>
<li>Sincerely looking for the other half</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
This week is the first week of learning. I'm not very proficient in typing code. I have to look at the book typing letter by letter. For the next week, I want to learn css well and make a beautiful web page