Chapter 03 - front end core technology - HTML media
Learning objectives
Master the characteristics, key points and difficulties of HTML block elements and inline elements
Master the key points of HTML forms and form elements
Master the use of HTML audio and video
Master the use of HTML5 cache
HTML block inline
All elements of HTML can be divided into block elements and inline elements
Inline element area: width and height cannot be set. Multiple inline elements can be arranged in one line
For example:
<span>,<b>,<img>,<a>
Inline element area: width and height can be set, and one line is exclusive
For example:
<div>,<table>,<ul>,<li>
The original * block element * is div, and the span of the original inline element
block element
Case 01:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>block element </title> </head> <body> <div> <img src="image/avatar.jpg" height="40" align="left" /> <div> Author:<ins>Xiao Yue</ins> </div> <div> Published on:<ins>2222-03-01</ins> </div> </div> </body> </html>
Effect display:
Inline element
Case 02:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>block element </title> </head> <body> <div> <img src="image/avatar.jpg" height="40" align="center" /> <span> Author:<ins>Xiao Yue</ins> </span> <span> Published on:<ins>A magical person</ins> </span> </div> </body> </html>
Effect display:
HTML form
HTML forms are used to collect different types of user input. And submit data
1. A form is an area containing form elements.
2. Form elements allow users to enter content in the form, such as:
3. Text box (input)
4. Text area
5. Drop down list (select option)
6. Radio
7. Check box, etc.
HTML form tag
< input > attribute value type
Case 03
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>form </title> </head> <body> <table width="40%" align="center"> <caption> <h4>form </h4> </caption> <tr align="center"> <td> <form> <fieldset> <legend align="center">personal information</legend> <label for="name">full name:</label> <input type="text" id="name" size="30"> <br> <label for="email">mailbox:</label> <input type="email" id="email" size="30"> </fieldset> Gender <input type="radio" name="sex" value="Male">male <input type="radio" name="sex" value="Female" checked="checked">female <br><br> hobby <input type="checkbox" name="vehicle[]" value="sing">sing <input type="checkbox" name="vehicle[]" value="dance" checked="checked">dance <br><br> curriculum <select> <optgroup label="front end"> <option value="css">css</option> <option value="js">js</option> <option value="html" selected="selected">html</option> </optgroup> <optgroup label="back-end"> <option value="php">php</option> <option value="java">java</option> </optgroup> </select> <br><br> Browser used <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer">Internet Explorer</option> <option value="Firefox">Firefox</option> <option value="Chrome">Chrome</option> <option value="Opera">Opera</option> <option value="Baidu">Baidu</option> </datalist> <br><br> <button type="submit">Submit</button> </form> </td> </tr> </table> </body> </html>
Effect display:
Case 04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table layout</title>
</head>
<body>
<h2 align="center">register</h2>
<hr>
<table width="800" border="0" align="center">
<tr>
<td width="100"><b>user name:</b></td>
<td><input type="text" name="name" class="bule" />
</td>
</td>
<td class="font1">No more than 7 Chinese characters, or 14 bytes (numbers, letters and underscores)</td>
</tr>
<tr>
<td><b>password: </b></td>
<td>
<input type="password" name="password1" size="20" class="bule" /></td>
<td class="font1">Minimum 6 characters, no more than 14 characters (numbers, letters and underscores)</td>
</tr>
<tr>
<td><b>Confirm password:</b></td>
<td colspan="2">
<input type="password" name="password11" size="20" class="bule" />
</td>
</tr>
<tr>
<td><b>Gender: </b></td>
<td colspan="2">
<input type="radio" name="gender" value="female" checked/>female
<input type="radio" name="gender" value="male" />male<br><br>
</td>
</tr>
<tr>
<td><b>Personal hobbies:</b></td>
<td colspan="2">
<input type="checkbox" name="intrest" value="literature" />literature
<input type="checkbox" name="intrest" value="Movies" />Movies
<input type="checkbox" name="intrest" value="music" />music
<input type="checkbox" name="intrest" value="Sports" />Sports
</td>
</tr>
<tr>
<td><b>City:</b></td>
<td colspan="2">
<select size="1" name="province">province
<option>Zhejiang</option>
<option>Shandong</option>
</select>
<select size="1" name="city">province
<option>Shaoxing</option>
<option>Weifang</option>
</select>
<br><br>
</td>
</tr>
<tr>
<td><b>Home address:</b></td>
<td><input type="text" name="address" class="bule" /></td>
<td class="font1">Please enter a detailed home address to accept activity mail</td>
</tr>
<tr>
<td><b>E-mail:</b></td>
<td><input type="text" name="email" class="bule" /></td>
<td class="font1"> Please enter a valid email address. You can pick it up when your password is lost</td>
</tr>
<tr>
<td><b>Verification Code:</b></td>
<td><input type="text" name="check-img" class="bule" /></td>
<td>5468</td>
</tr>
<tr>
<td colspan="3">
<form method="post" action="">Do you agree to the terms
<input type="radio" name="aggree" value="aggree" /> I agree
<input type="radio" name="aggree" value="disaggree" /> I disagree<br><br>
<textarea name="textarea" cols="100" rows="10" wrap="hard" class="bule">
Shandong Shichuang Software Engineering Co., Ltd., founded in 1994, is a comprehensive information industry company. It not only has independent intellectual property rights and software R & D capabilities, but also focuses on IT Talent vocational education, with a variety of businesses such as education and training, software development and international talent services. Shandong Shichuang passed the first batch"Double soft"Recognized as a member of Shandong software industry association and a member of Qilu Software Park International Cooperation Alliance, it has been recognized as a member of Shandong Provincial Department of information industry and Department of science and technology"Shandong software enterprise","High tech enterprises in Shandong Province"，In addition, because the company has done a lot of fruitful work in software talent training, it has also been awarded"Qilu Software Park software talent training base","Industrial application engineer training base","Qilu Software Park Japan software talent training base","Jinan computer training base for retired soldiers"And other titles.
Shandong Shichuang is committed to high-end IT Personnel training, adhere to"Integrity education"Business philosophy to"Turn people who need work into people who need work"For the business purpose, relying on the strong industrial advantages of Qilu Software Park, actively explore the training mode of high-quality software talents"Software training"Mode to conduct software talent training, provide better career development opportunities for people interested in software development, and provide customized professional and applicable talents for software enterprises.
At present, Shichuang company has more than 160 employees, including 2 doctors and 12 master's students. People with university degree or above account for 89% of the total number of employees%above. The management of the company has good scientific and technological awareness and strong innovation ability, and has many years of experience IT Enterprise management experience and vocational education experience. The company has always regarded talent training as the top priority of its work. It believes that talent accumulation is the basis of enterprise success and team construction is the guarantee of career development. Through the experience of various businesses in recent years, Shichuang company has an experienced, skilled and United software development, system integration, especially vocational education and training team.
</textarea>
</form>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</body>
</html>
```
###Effect display:
####summary
Input box and title<input>and<lable>
user name:
Guizhou ProvinceInput boxes and input preselects
Guizhou Province ```` Radio box. The name attribute must be set to group, otherwise it cannot be selected ```` Option 1 Option 2 Option 3 Option 4 ```` Check box and name attribute must also be provided for grouping, otherwise the submitted data is not the same group ```` Option 1 Option 2 Option 3 Option 4 ```` ####HTML audio and video Label description < embedded > audio and video, support single video < Object > audio and video, support single video < audio > audio, support multiple video < video > video, support multiple video < embedded > element The < embedded > tag defines a container for external (non HTML) content. (this is an HTML5 tag, which is illegal in HTML4, but valid in all browsers).Drop down selection box
Syntax:
<embed height="50" width="100" src="horse.mp3">
Case 05
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Audio and video playback</title> </head> <body> <embed height="70" align="center" src="source/SAVE.mp3" /> <br> <br> <embed src="source/yun.mp4" /> </body> </html>
Effect display:
< Object > element
The < Object > tag can also define a container for external (non HTML) content.
The < Object > tag is used to contain objects such as audio, video, Java applets, ActiveX, PDF, and Flash.
The original intention of object is to replace the {img} and applet} elements. However, this has not been achieved due to vulnerabilities and lack of browser support.
Unfortunately, mainstream browsers use different code to load the same object type. Now commonly used in plug-ins
For example:
<html> <head> <title></title> </head> <body> <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf"> <param name="movie" value="myvideo.swf" /> <param name="flashvars" value="autostart=true&file=myvideo.swf" /> </object> </body> </html>
Syntax:
html <object width="550" height="400"> <param name="movie" value="yun.mp4"> </object> <object data="yun.mp4"></object> <object type="application/pdf" data="xxx.pdf"></object>
Case 06
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Audio and video playback</title> </head> <body> <object height="70" data="source/SAVE.mp3"></object> <br> <br> <object data="source/yun.mp4"></object> </body> </html>
Effect display:
< audio > and < video >
< audio > plays audio without picture, < video > plays audio and video with picture.
Syntax:
<audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> Browser does not support </audio> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support video label. </video>
Effect display:
Case 07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Audio and video playback</title>
</head>
<body>
<video controls>
<source src="source/save.mp3" type="audio/mpeg"></source>
<object data="source/save.mp3" width="320" height="240">
<embed height="50" width="100" src="source/save.mp3">
</object>
</video>
<br>
<video width="320" height="240" controls>
<source src="source/yun.mp4" type="video/mp4"></source>
<object data="source/yun.mp4" width="320" height="240">
<embed src="source/yun.mp4" width="320" height="240">
</object>
</video>
</body>
</html>
Effect display:
HTML5 semantic elements
HTML5 adds many semantic elements as follows:
Label description < article > defines a page independent content area.
Define the sidebar content of the page< BDI > allows you to set a piece of text away from the text direction setting of its parent element< Command > defines command buttons, such as radio buttons, check boxes or buttons < details > is used to describe the details of a document or part of a document < dialog > defines the dialog box, For example, the < summary > tag of the prompt box contains the title < figure > of the details element, which specifies the independent flow content (image, chart, photo, code, etc.). < figcaption > defines the title of the < figure > element. < lfooter > defines the footer of the section or document. < header > defines the header area of the document. Defines marked text. < meter > defines metrics. Only for metrics with known maximum and minimum values. < NAV > defines the part of the navigation link. < progress > defines any type of task Progress< ruby&lgt; Define Ruby comments (Chinese phonetics or characters). < RT > define the interpretation or pronunciation of characters (Chinese phonetics or characters). < RP > used in Ruby comments, define the content displayed by browsers that do not support Ruby elements. Define sections (sections, sections) in documents. Define dates or times. < wbr > specify where line breaks are appropriate in text.HTML5 removed element
The following HTML 4.01 elements have been deleted in HTML5:
<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike>
task
1. Display all commonly used input boxes in the following HTML
Effect display:
Reference code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Assignment 1</title>
</head>
<body>
<form method="post" action="">
<fieldset id="" align="center">
<legend>Input element</legend>
Text input<input type="text" pattern=""/><br>
Telephone number<input type="tel" /><br>
Number type<input type="number" /><br>
Input range 0<input type="range" />99<br>
Search type<input type="search" /><br>
Password type<input type="password" /><br>
Website address<input type="url" /><br>
E-mail<input type="email" /><br>
week<input type="week" /><br>
month<input type="month" /><br>
date<input type="date" /><br>
Time date<input type="datetime-local" /><br>
colour<input type="color" /><br>
file<input type="file" /><br>
Button<input type="button" value="Button"/><br>
Radio <input type="radio" /><br>
check box<input type="checkbox" /><br>
</fieldset>
</form>
</body>
</html>
2. Implement the following login interface
Effect display:
Reference code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Assignment 2</title>
</head>
<body>
<form method="post" action="">
<h2 align="center">Sign in</h2>
<fieldset id="" align="center">
<legend>quick logon</legend>
<br><br>
<b>User name:</b>
<input type="text" name="name" class="bule" />
<br><br>
<b>User password:</b>
<input type="password" name="password1" size="20" class="bule" />
<br><br>
<input type="checkbox" name="gender" value="female" checked/>Remember password
<br>
<br>
<input type="button" name="submit" id="submit" value="Sign in" />
<input type="reset" name="reset" id="reset" value="Reset" />
<br>
<br>
</fieldset>
</form>
</body>
</html>
3. Achieve the following registration effects
Effect display:
Reference code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Assignment 3</title>
</head>
<body>
<form method="post" action="">
<table width="600" align="center">
<caption>
<h2 align="center">register</h2></caption>
<tr height="20">
<td width="20%">
<label><b>user name:</b></label>
</td>
<td width="30%">
<input type="text" name="name" class="bule" />
</td>
<td width="50%">
<ins>No more than 7 Chinese characters, or 14 bytes (numbers, letters and underscores)</ins>
</td>
</tr>
<tr height="38">
<td width="20%">
<label><b>password:</b></label>
</td>
<td width="30%">
<input type="password" name="password1" size="20" class="bule" />
</td>
<td width="50%">
Minimum 8 characters, no more than 14 characters (numbers, letters and underscores)
</td>
</tr>
<tr height="38">
<td width="20%">
<label><b>Gender:</b></label>
</td>
<td width="30%">
<input type="radio" name="gender" value="female" checked />female
<input type="radio" name="gender" value="male" />male
</td>
<td width="50%">
<ins>Please note that! Gender cannot be changed. For modification, please call the hotline 1234567890</ins>
</td>
</tr>
<tr height="38">
<td width="20%">
<label><b>Personal hobbies:</b></label>
</td>
<td width="30%">
<input type="checkbox" name="intrest" value="literature" />literature
<input type="checkbox" name="intrest" value="Movies" />Movies
<input type="checkbox" name="intrest" value="music" />music
</td>
<td width="50%"></td>
</tr>
<tr height="38">
<td width="20%">
<label><b>City:</b></label>
</td>
<td width="30%">
<select size="1" name="province">
<option>Zhejiang</option>
<option>Shandong</option>
</select>
<select size="1" name="city">
<option>Shaoxing</option>
<option>Weifang</option>
</select>
<select size="1" name="city">
<option>Daxing</option>
<option>Weifang</option>
</select>
</td>
<td width="50%"></td>
</tr>
<tr height="38">
<td width="20%">
<label><b>Home address:</b></label>
</td>
<td width="30%">
<input type="text" name="address" class="bule" />
</td>
<td width="50%"></td>
</tr>
<tr height="38">
<td width="20%">
<label><b>E-mail:</b></label>
</td>
<td width="30%">
<input type="text" name="email" class="bule" />
</td>
<td width="50%"></td>
</tr>
<tr height="38">
<td width="20%">
<label><b>Verification Code:</b></label>
</td>
<td width="30%">
<input type="text" name="check-img" class="bule" />
</td>
<td width="50%">5468</td>
</tr>
<tr height="38">
<td width="20%">
<label><b>Do you agree to the terms:</b></label>
</td>
<td width="30%">
<input type="radio" name="aggree" value="aggree" /> I agree
<input type="radio" name="aggree" value="disaggree" /> I disagree
</td>
<td width="50%"></td>
</tr>
<tr height="38">
<td colspan="3">
<textarea name="textarea" cols="100" rows="10">
Shandong Shichuang Software Engineering Co., Ltd., founded in 1994, is a comprehensive information industry company. It not only has independent intellectual property rights and software R & D capabilities, but also focuses on IT Talent vocational education, with a variety of businesses such as education and training, software development and international talent services. Shandong Shichuang passed the first batch"Double soft"Recognized as a member of Shandong software industry association and a member of Qilu Software Park International Cooperation Alliance, it has been recognized as a member of Shandong Provincial Department of information industry and Department of science and technology"Shandong software enterprise","High tech enterprises in Shandong Province"，In addition, because the company has done a lot of fruitful work in software talent training, it has also been awarded"Qilu Software Park software talent training base","Industrial application engineer training base","Qilu Software Park Japan software talent training base","Jinan computer training base for retired soldiers"And other titles.
Shandong Shichuang is committed to high-end IT Personnel training, adhere to"Integrity education"Business philosophy to"Turn people who need work into people who need work"For the business purpose, relying on the strong industrial advantages of Qilu Software Park, actively explore the training mode of high-quality software talents"Software training"Mode to conduct software talent training, provide better career development opportunities for people interested in software development, and provide customized professional and applicable talents for software enterprises.
At present, Shichuang company has more than 160 employees, including 2 doctors and 12 master's students. People with university degree or above account for 89% of the total number of employees%above. The management of the company has good scientific and technological awareness and strong innovation ability, and has many years of experience IT Enterprise management experience and vocational education experience. The company has always regarded talent training as the top priority of its work. It believes that talent accumulation is the basis of enterprise success and team construction is the guarantee of career development. Through the experience of various businesses in recent years, Shichuang company has an experienced, skilled and United software development, system integration, especially vocational education and training team.
</textarea>
</fieldset>
</td>
</tr>
<tr height="38">
<td colspan="3" align="center">
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
4. Realize the following online examination system
Effect display:
Reference code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="0" align="center" width="60%">
<caption>
<h3 align="center">Online examination</h3>
</caption>
<tr>
<td align="center" height="50" colspan="2">
<span>Select class</span>
<select>
<optgroup label="1 grade">
<option>1 class</option>
<option>2 class</option>
</optgroup>
<optgroup label="2 grade">
<option>1 class</option>
<option>2 class</option>
</optgroup>
<optgroup label="3 grade">
<option>1 class</option>
<option>2 class</option>
</optgroup>
</select>
Select address
<select>
<option>Guizhou Province</option>
<option>Sichuan Province</option>
</select>
<select>
<option>Guiyang City</option>
<option>Zunyi City</option>
<option>Bijie City</option>
</select>
<select>
<option>Xifeng County</option>
<option>Huaxi District</option>
<option>Nanming District</option>
</select>
</td>
</tr>
<tr>
<td width="30%"></td>
<td>
<h4>(one)Single choice questions</h4>
<ol>
<li>
<p>Among the following, those belonging to block elements are ()</p>
<ol type="A">
<li><input type="radio" name="t1" />i</li>
<li><input type="radio" name="t1" />table</li>
<li><input type="radio" name="t1" />font</li>
<li><input type="radio" name="t1" />stong</li>
</ol>
</li>
<li>
<p>The following elements that are inline are ()</p>
<ol type="A">
<li><input type="radio" name="t2" />div</li>
<li><input type="radio" name="t2" />table</li>
<li><input type="radio" name="t2" />font</li>
<li><input type="radio" name="t2" />p</li>
</ol>
</li>
</ol>
<h4>(two)Multiple choice questions</h4>
<ol>
<li>
<p>Among the following, those belonging to block elements are ()</p>
<ol type="A">
<li><input type="checkbox" name="t3" />i</li>
<li><input type="checkbox" name="t3" />table</li>
<li><input type="checkbox" name="t3" />div</li>
<li><input type="checkbox" name="t3" />stong</li>
</ol>
</li>
<li>
<p>The following elements that are inline are ()</p>
<ol type="A">
<li><input type="checkbox" name="t4" />div</li>
<li><input type="checkbox" name="t4" />span</li>
<li><input type="checkbox" name="t4" />font</li>
<li><input type="checkbox" name="t4" />p</li>
</ol>
</li>
</ol>
<h4>(three)Answer questions</h4>
<ol>
<li>
<p>HTML What is it ()</p>
<textarea rows="10" cols="40"></textarea>
</li>
</ol>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</td>
</tr>
</table>
</body>
</html>