• 【高级网络程序设计】Week2-3 HTML


    一、The Basics

    1. HTML&HTML file

    HTMLMarkup language
    Hyper Text Markup Language
    HTML fileText file with markup tags
    .htm/.html extension

    Create an html file

    Open an editor

    Type:

    Save it as .html

    Open it using a browser

    2. HTML tags & HTML elements

    HTML tagsmark-up HTML elements
    HTML elementsdefined using HTML tags
    HTML documents text files made up of HTML elements
    Basic HTML tagsParagraphs

    (browsers automatically add an empty line before and after a paragraph)

    Headings
    Line breaks


    (to enter line breaks, not to seperate paragraphs)

    Horizontal rule
    Comments
    HTML document
    document's body
    the document's area for header/control infomation
    document's title</td></tr></tbody></table></div> <h2><a name="t3"></a>二、Build a Web Page</h2> <h3><a name="t4"></a>1. HTML Attributes & HTML Text Formatting</h3> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1" style="width:500px;"><tbody><tr><td colspan="1" rowspan="2" style="width:159px;"><strong>HTML Attributes</strong></td><td style="width:340px;">provide<span style="color:#1a439c;"> additional information</span> to an HTML element</td></tr><tr><td style="width:340px;"><span style="color:#1a439c;">case insensitive</span></td></tr><tr><td colspan="1" rowspan="10" style="width:159px;"><strong>HTML Text Formatting</strong></td><td style="width:340px;"><strong><b></b> </strong>bold</td></tr><tr><td style="width:340px;"><strong><strong></strong></strong>strong</td></tr><tr><td style="width:340px;"><strong><bid></big></strong>big</td></tr><tr><td style="width:340px;"><strong><em></em></strong>emphasized</td></tr><tr><td style="width:340px;"><strong><i></i></strong>italic</td></tr><tr><td style="width:340px;"><strong><small></small></strong>small</td></tr><tr><td style="width:340px;"><strong><sub></sub></strong>subscripted</td></tr><tr><td style="width:340px;"><strong><sup></sup></strong>superscripted</td></tr><tr><td style="width:340px;"><strong><ins></ins></strong>inserted</td></tr><tr><td style="width:340px;"><strong><del></del></strong>deleted</td></tr></tbody></table></div> <h3><a name="t5"></a>2. Character Entities</h3> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1" style="width:500px;"><tbody><tr><td>non-breaking space</td><td><strong> </strong></td></tr><tr><td>less than</td><td><strong><</strong></td></tr><tr><td>greater than</td><td><strong>></strong></td></tr><tr><td>ampersand</td><td><strong>&</strong></td></tr><tr><td>quotation mark</td><td><strong>"</strong></td></tr><tr><td>pound</td><td><strong>£</strong></td></tr><tr><td>yen</td><td><strong>¥</strong></td></tr><tr><td>euro</td><td><strong>&euro</strong></td></tr><tr><td>section</td><td><strong>§</strong></td></tr><tr><td>copyright</td><td><strong>©</strong></td></tr><tr><td>registered trademark</td><td><strong>®</strong></td></tr><tr><td>multiplication</td><td><strong>×</strong></td></tr><tr><td>division</td><td><strong>÷</strong></td></tr></tbody></table></div> <h3><a name="t6"></a>3. HTML Links</h3> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1" style="width:650px;"><tbody><tr><td><span style="color:#1a439c;"><strong>link to another document</strong> </span>on the Web</td><td> <p><a href="linkpage.html">This text</a></p> <p><a  href="http://www.qmul.ac.uk/">This text</a></p> </td></tr><tr><td>an<strong> <span style="color:#1a439c;">image</span></strong> as a link</td><td> <p><a href="linkpage.html"></p> <p><img border="0" src="image.jpg" width ="65" height="38"></a></p> </td></tr><tr><td><span style="color:#1a439c;"><strong>Target</strong>:</span> where to open the linked document</td><td> <p>_blank: open in a new window or tab</p> <p><a href="http://www.qmul.ac.uk/" target="_blank"></a></p> <p>_self: open in the same frame as it was clicked</p> <p>_parent: open in the parent frame</p> <p>_top: open in the full body of the window</p> <p>framename: open in a named frame</p> </td></tr><tr><td><span style="color:#1a439c;"><strong>name and section</strong></span></td><td> <p><a name="top">top of the page</a></p> <p><a href="section.html"#top>Jump to the top</a></p> </td></tr></tbody></table></div> <h3><a name="t7"></a>4. HTML Tables/Lists/Images & Colors</h3> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1" style="width:650px;"><tbody><tr><td rowspan="9" style="width:88px;"><strong>HTML Tables</strong></td><td style="width:169px;"><strong>a table</strong></td><td style="width:391px;"><table></td></tr><tr><td style="width:169px;"><strong>a table header</strong></td><td style="width:391px;"><th></td></tr><tr><td style="width:169px;"><strong>table row</strong></td><td style="width:391px;"><tr></td></tr><tr><td style="width:169px;"><strong>table cell</strong></td><td style="width:391px;"><td></td></tr><tr><td style="width:169px;"><strong>table caption</strong></td><td style="width:391px;"><caption></td></tr><tr><td style="width:169px;"><strong>table head</strong></td><td style="width:391px;"><thead></td></tr><tr><td style="width:169px;"><strong>table body</strong></td><td style="width:391px;"><tbody></td></tr><tr><td style="width:169px;"><strong>table footer</strong></td><td style="width:391px;"><tfoot></td></tr><tr><td style="width:169px;">其他</td><td style="width:391px;"> <p><span style="color:#1a439c;"><strong>Align</strong></span> <span style="color:#1a439c;"><strong>the text:</strong></span> <td align = "left/right/center"></td></p> <p><strong><span style="color:#1a439c;">Background colour:</span></strong> <table border = "1" bgcolor="red"></p> <p><strong><span style="color:#1a439c;">Background image: </span></strong><table border = "1" background = "bg.jpg"></p> </td></tr><tr><td colspan="1" rowspan="3" style="width:88px;"> <p><strong>HTML</strong></p> <p><strong>Lists</strong></p> </td><td style="width:169px;"><strong>Unordered list</strong></td><td style="width:391px;"> <p><ul>        <li></li>        </ul></p> </td></tr><tr><td style="width:169px;"><strong>Ordered list</strong></td><td style="width:391px;"><ol>        <li></li>        </ol></td></tr><tr><td style="width:169px;"><strong>Type of ordered list</strong></td><td style="width:391px;"><ol type = "A/a/Ⅰ/i"></td></tr><tr><td colspan="1" rowspan="5" style="width:88px;"> <p><strong>HTML</strong></p> <p><strong>Images & Colors</strong></p> <p></p> </td><td style="width:169px;"><strong>Insert an image <img></strong></td><td style="width:391px;"><img src = "image.gif" height = "50"></td></tr><tr><td style="width:169px;"><strong>alt attribute</strong></td><td style="width:391px;"> <p>define an<span style="color:#1a439c;"> <strong>"alternate text"</strong> </span>for an image</p> <p><img src = "me.jpg" alt = "This is me"></p> </td></tr><tr><td style="width:169px;"><strong>Background image</strong></td><td style="width:391px;"><body <span style="color:#1a439c;">background</span>="background.jpg"></td></tr><tr><td style="width:169px;"><strong>Background color</strong></td><td style="width:391px;"><body <span style="color:#1a439c;">bgcolor</span>="#d0d0d0"></td></tr><tr><td style="width:169px;"><strong>Text colour</strong></td><td style="width:391px;"><body <span style="color:#1a439c;">bgcolor</span>="#d0d0d0" <span style="color:#1a439c;">text</span>="yellow"></td></tr></tbody></table></div> <h2><a name="t8"></a>三、Handling User Input</h2> <h3><a name="t9"></a>1. HTML Forms and Input</h3> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1" style="width:500px;"><tbody><tr><td colspan="1" rowspan="3"><strong>HTML Forms</strong></td><td><span style="color:#1a439c;">select different kinds</span> of user input</td></tr><tr><td>an area that <span style="color:#1a439c;">contain form elements</span> that <span style="color:#1a439c;">allow user to enter information</span></td></tr><tr><td><form>        <input></input>        </form></td></tr><tr><td><strong>Input</strong></td><td>type is specified with <span style="color:#1a439c;">type attribute</span></td></tr></tbody></table></div> <h3><a name="t10"></a>2. Text Fields/Password Fields/Radio Buttons/Check Boxes/Simple dropdown box/Fieldset/Textarea/Button</h3> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1" style="width:650px;"><tbody><tr><td colspan="1" rowspan="2" style="width:88px;"><strong>Text Fields</strong></td><td style="width:561px;"> <pre data-index="0" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span> = <span class="hljs-string">"text"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"user"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">form</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> </td></tr><tr><td style="width:561px;"><span style="color:#1a439c;"><strong>name:</strong></span> the identifier that is sent to the server when you submit the form</td></tr><tr><td colspan="1" rowspan="2" style="width:88px;"><strong>Password Fields</strong></td><td style="width:561px;"> <pre data-index="1" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"password"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">form</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> </td></tr><tr><td style="width:561px;">displays <strong><span style="color:#1a439c;">asterisks or bullet points</span></strong> instead of characters</td></tr><tr><td colspan="1" rowspan="2" style="width:88px;"><strong>Radio Buttons</strong></td><td style="width:561px;"> <pre data-index="2" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">form</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sex"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"male"</span>></span>Male</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"sex"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"female"</span>></span>Female</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">form</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> </td></tr><tr><td style="width:561px;">select<span style="color:#1a439c;"><strong> one</strong></span> of the choices</td></tr><tr><td colspan="1" rowspan="2" style="width:88px;"><strong>Check Boxes</strong></td><td style="width:561px;"> <pre data-index="3" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">form</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span> = <span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"vehicle"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"bike"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span> = <span class="hljs-string">"checkbox"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"vehicle"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"car"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">form</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> </td></tr><tr><td style="width:561px;">select <strong>one or more</strong> options</td></tr><tr><td colspan="1" rowspan="2" style="width:88px;"><strong>Defining <label> for button</strong> <p></p> <p></p> </td><td style="width:561px;"> <p>Each<strong> <span style="color:#1a439c;">button</span> </strong>should have a<span style="color:#1a439c;"><strong> label</strong></span></p> <p><span style="color:#1a439c;"><strong><label></strong></span>: defines a label for <strong>an <input> element</strong>;</p> <p>              allow a user to click on the label as well as the button</p> <p>The <strong>for attribute</strong> of the <label> tag =  the i<strong>d attribute</strong> of the related element</p> </td></tr><tr><td style="width:561px;"> <blockquote> <p><<span style="color:#fe2c24;">form</span> action="demo_form.asp"><br>     <<strong><span style="color:#e6b223;">label </span>for =</strong> "<strong>male</strong>">Male</label></p> <p>    <<span style="color:#1c7892;">input type</span> = "radio" name="sex" <strong><span style="color:#e6b223;">id</span> =</strong>"<strong>male</strong>" value="male">Male</p> <p></p> <p>    <<strong><span style="color:#e6b223;">label</span> for =</strong> "<strong>female</strong>">Female</label></p> <p>    <<span style="color:#1c7892;">input type </span>= "radio" name="sex"<strong> <span style="color:#e6b223;">id</span> =</strong>"<strong>female</strong>" value="female">Female</p> <p></p> <p>    <<span style="color:#1c7892;">input type </span>= "submit" value="Submit"><br> <<span style="color:#fe2c24;">/form</span>></p> </blockquote> </td></tr><tr><td colspan="1" style="width:88px;"><strong>Action attribute</strong></td><td style="width:561px;"> <p>define <span style="color:#1a439c;"><strong>the name of the file to send the content to</strong></span></p> <p>the file defined in the action usually <u>does something with the received input </u></p> </td></tr><tr><td colspan="1" style="width:88px;"><strong>Submit attribute</strong></td><td style="width:561px;"> <p><strong><span style="color:#1a439c;">the content of the form is sent to another file</span></strong></p> <p><img alt="" height="118" src="https://1000bd.com/contentImg/2023/11/22/011423448.jpeg" ></p> <p><img alt="" height="31" src="https://1000bd.com/contentImg/2023/11/22/011423649.jpeg" ></p> <p><img alt="" height="197" src="https://1000bd.com/contentImg/2023/11/22/011423552.jpeg" ></p> </td></tr><tr><td colspan="1" style="width:88px;"><strong>Image act as a submit button</strong></td><td style="width:561px;">The image type is <span style="color:#1a439c;"><strong>by default a form submitting button</strong></span></td></tr><tr><td colspan="1" rowspan="1" style="width:88px;"><strong>Simple dropdown box</strong></td><td style="width:561px;"> <blockquote> <p><<span style="color:#fe2c24;">form</span> action=""></p> <p>        <<span style="color:#1a439c;"><strong>select</strong></span><span style="color:#1c7892;"> </span>name="cars"><br>                 <<strong>option value</strong>="volvo">Volvo<<strong>/option</strong>><br>                 <<strong>option value</strong>="saab">Saab<<strong>/option</strong>><br>                 <<strong>option value</strong>="audi">Audi<<strong>/option</strong>><br>         <<span style="color:#1a439c;"><strong>/select</strong></span>><br> <<span style="color:#fe2c24;">/form</span>></p> </blockquote> </td></tr><tr><td colspan="1" rowspan="1" style="width:88px;"><strong>Fieldset</strong></td><td style="width:561px;"> <blockquote> <p><span style="color:#fe2c24;"><<strong>fieldset</strong>></span><br>     <span style="color:#1a439c;"><<strong>legend</strong>></span><br>        Health information:<br>     <span style="color:#1a439c;"><<strong>/legend</strong>></span><br>     <<span style="color:#1a439c;"><strong>form</strong></span> action=""><br>         Height<<strong>input type</strong>="text" size="3"><br>         Weight<<strong>input type</strong>="text" size="3"><br>     <span style="color:#1a439c;"><<strong>/form</strong>></span><br><span style="color:#fe2c24;"><<strong>/fieldset</strong>></span></p> </blockquote> </td></tr><tr><td colspan="1" rowspan="1" style="width:88px;"><strong>Textarea</strong></td><td style="width:561px;"> <pre data-index="4" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"10"</span> <span class="hljs-attr">col</span>=<span class="hljs-string">"30"</span>></span> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> The cat was in the garden</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> </td></tr><tr><td style="width:88px;"><strong> Button</strong></td><td style="width:561px;"> <pre data-index="5" class="set-code-show" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">""</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"Hello world!"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">form</span>></span></div></div></li></ol></code><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> </td></tr><tr><td style="width:88px;"><strong>Difference between button and submit</strong></td><td style="width:561px;"> <p><strong><input type="button"></strong>: will not submit a form on their own——they don't do anying by default.</p> <p><strong><input type="submit"></strong>: will submit the form they are in when the user clicks on them</p> </td></tr><tr><td style="width:88px;"><strong>Difference between id and name</strong></td><td style="width:561px;"> <p><strong>The name attribute</strong>: what is sent when the form is submitted.</p> <p><strong>The id attribute</strong>: uniquely identifies any element on the page.</p> <p>When the form is submitted, <strong>only the selected option</strong> is sent.</p> </td></tr></tbody></table></div> <h3><a name="t11"></a></h3> <h3><a name="t12"></a>3. Form Tags</h3> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1" style="width:500px;"><tbody><tr><td style="text-align:center;"><strong><form></strong></td><td>a form for user input</td></tr><tr><td style="text-align:center;"><strong><input></strong></td><td>an input field</td></tr><tr><td style="text-align:center;"><strong><textarea></strong></td><td>a text-area</td></tr><tr><td style="text-align:center;"><strong><label></strong></td><td>a label to a control</td></tr><tr><td style="text-align:center;"><strong><fieldset></strong></td><td>a fieldset</td></tr><tr><td style="text-align:center;"><strong><legend></strong></td><td>a caption for a fieldset</td></tr><tr><td style="text-align:center;"><strong><select></strong></td><td>a selectable list</td></tr><tr><td style="text-align:center;"><strong><optgroup></strong></td><td>an option group</td></tr><tr><td style="text-align:center;"><strong><option></strong></td><td>an option in the drop-down box</td></tr><tr><td style="text-align:center;"><strong><button></strong></td><td>a push button</td></tr></tbody></table></div> <h2><a name="t13"></a>思维导图</h2> <h2><a name="t14"></a><img alt="" height="1200" src="https://1000bd.com/contentImg/2023/11/22/011423954.png" ></h2> <h2><a name="t15"></a>Exercise</h2> <p><img alt="" height="411" src="https://1000bd.com/contentImg/2023/11/22/011423518.png" ></p> <p><img alt="" height="575" src="https://1000bd.com/contentImg/2023/11/22/011423650.png" ></p> <blockquote> <p><strong>1. What is the difference between the three text boxes?</strong></p> <p>The values of them are different. </p> <p><strong>2. What happens if you change this tag <body> to <body bgcolor=ccffcc>?</strong></p> <p><img alt="" height="151" src="https://1000bd.com/contentImg/2023/11/22/011423639.png" ></p> <p><strong>3. What happens if you add this tag after the body tag: <front face=arial>?</strong></p> <p><img alt="" height="94" src="https://1000bd.com/contentImg/2023/11/22/011423416.png" ></p> <p><strong>4. What happens if you delete a <br> tag?</strong></p> <p><img alt="" height="42" src="https://1000bd.com/contentImg/2023/11/22/011423691.png" ></p> <p><strong>5. What happens if you add this before the first text box:<h2>Please add information</h2></strong></p> <p><img alt="" height="97" src="https://1000bd.com/contentImg/2023/11/22/011423704.png" ></p> <p><strong>6. What happens if you do NOT include the closing tag i.e. </h2>?</strong></p> <p><img alt="" height="49" src="https://1000bd.com/contentImg/2023/11/22/011423706.png" ></p> </blockquote> <p><img alt="" height="471" src="https://1000bd.com/contentImg/2023/11/22/011424312.png" ></p> <p><img alt="" height="613" src="https://1000bd.com/contentImg/2023/11/22/011424390.png" ></p> <blockquote> <p><strong>1. Does the page display what is written in the value attribute (e.g. pz) or what is written after the tag (e.g. pizza)?</strong></p> <p>No.</p> <p><strong>2. Can a user select more than one food type?</strong></p> <p>No. Checkbox can.</p> <p><strong>3. Change the name of the last radio button (i.e. the one for the salad), from name=food to name=morefood. Can the user now select more than one food type (e.g. salad and pasta)?</strong></p> <p>No.</p> </blockquote> <p><img alt="" height="487" src="https://1000bd.com/contentImg/2023/11/22/011424391.png" ></p> <p><img alt="" height="624" src="https://1000bd.com/contentImg/2023/11/22/011424385.png" ></p> <blockquote> <p><strong>1. Does the list show the word bungalow or bung? </strong></p> <p>bung.</p> <p><strong>2. In Internet Explorer (IE), add a space followed by the word selected after bungalow. Save the file and refresh the browser. What has changed? </strong></p> <p><img alt="" height="618" src="https://1000bd.com/contentImg/2023/11/22/011423419.png" ></p> <p>bung is selected by default.</p> </blockquote> <p><img alt="" height="436" src="https://1000bd.com/contentImg/2023/11/22/011423520.png" ></p> <blockquote> <p><strong>1. Write the difference between the three textAreas? 1) 2) 3)</strong></p> <p>The name and default content</p> <p><strong>2. How would you correct the third textArea? </strong></p> <p><img alt="" height="513" src="https://1000bd.com/contentImg/2023/11/22/011424313.png" ></p> <p><strong>3. There is no value attribute – what is the value of a textArea?</strong></p> <p>The text content of it.</p> </blockquote> <h2><a name="t16"></a>Lab2——html</h2> <h3><a name="t17"></a>Questions</h3> <blockquote> <p><strong>1. What is HTML? How does it relate to HTTP?</strong></p> <p>· HTML is a mark-up language, which is used to build a web page and handle user input.</p> <p>· HTTP is the application protocol which is used to request and response on the browser and client. </p> <p>· HTML build the web page, and HTTP send and receive the web page.</p> <p></p> <p><strong>2. In HTML, you can have input of type submit, together with an associated button (like the Submit button in Error! Reference source not found.). What is supposed to happen when you click that button?</strong></p> <p>Button will not submit a form on their own, they don't do anything by default. However, submit buttons will submit the form they are in when the user clicks on them</p> </blockquote> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/900686">SQL的注入对于安全测试的重要性~</a> <br /> <a href="/Article/Index/1300611">如何用C语言实现 IoT Core</a> <br /> <a href="/Article/Index/757862">六、01【Java 多线程】之重温操作系统</a> <br /> <a href="/Article/Index/1656185">解密PyTorch Lightning,实操简化深度学习</a> <br /> <a href="/Article/Index/1558318">HTML5 <video> 标签属性、API 方法、事件、自定义样式详解与实用示例</a> <br /> <a href="/Article/Index/1332406">Vue.js快速入门:构建现代Web应用</a> <br /> <a href="/Article/Index/610984">.NET LoongArch64 正式合并进入.NET</a> <br /> <a href="/Article/Index/1472722">如何使用 WPF 应用程序连接 FastReport报表</a> <br /> <a href="/Article/Index/955499">安装CDH配置本地CM、CDH源时,配置Apache Web服务器一直显示403看不到目录</a> <br /> <a href="/Article/Index/1449660">Linux下查看压缩文件内容的10种方法(小结)</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址:https://blog.csdn.net/weixin_62403234/article/details/134487287 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常,环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们,该打造你的技术影响力了!</a> <br /> <a href="/Article/Index/888183">五年了,我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块,老程序员花了一个周末,连接中学年代!</a> <br /> <a href="/Article/Index/797730">面试官都震惊,你这网络基础可以啊!</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候,用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图,Python爬虫120例,再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>