Web developer bootcamp - HTML

最新推荐文章于 2023-11-09 14:34:08 发布

fwu11

最新推荐文章于 2023-11-09 14:34:08 发布

阅读量320

点赞数

分类专栏： SDE

本文链接：https://blog.csdn.net/weixin_42552135/article/details/98432081

版权

SDE 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Web developer bootcamp - HTML

general rule:

<tagName> Some Content </tagName>

Every HTML document we create will start with this boilerplate:

<!DOCTYPE html> 
<html> 
<head> 
<!-- Our metadata goes here --> 
    <title></title> 
</head> 
<body> 
<!-- Our content goes here --> 
</body> 
</html>

Common Tags

<!-- block elements -->
<h1>I'm a header </h1>
<h2>I'm a slightly smaller header </h2>
<h6>I'm the smallest header </h6>
<p>I'm a paragraph</p>
<button>I'm a button!</button>

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
</ul>

<ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
</ol>
<!-- generic container: group content together in block-->
<div> </div>


<!-- inline elements -->

<!-- bold -->
<strong> </strong>
<!-- emphensize -->
<em> </em>
<!-- generic inline container : group content together inline-->
<span> </span>

Closing Tags

<h1>I need a closing tag </h1>
<p>Me too!</p>

Self-Closing Tags

<!-- No closing tag or inner text needed -->
<img src="corgi.png">
<link href="style.css">

Attributes

key: value pair

<tag name="value"></tag>

<p class="selected">woof woof</p>
<link rel="stylesheet" type="text/css" href="style.css">

Images

<img src="corgi.png">

Links

<!-- The <a> tag defines a hyperlink, which is used to link from one page to another. -->
<!-- inline -->
<a href="url">Link Text</a>

<a href="http://www.google.com">Click me to go to Google</a>

HTML tables

<table>
    <thead>
        <tr> 
            <!-- table header -->
            <th></th>
        </tr>
    </thead>
    <tbody>
        <!-- table row -->
        <tr> 
            <!-- table cell -->
            <td></td>
        </tr>
    </tbody>
</table>

The <form> tag

<form action="/my-form-submitting-page" method="post">
    <!-- All our inputs will go in here -->
</form>

action - the URL to send form data to
method - the type of HTTP request

The <input> tag

The Input tag creates interactive controls.

type - determines the type of input.
placeholder - for text temporarily fill in the input
name- same name can connect the input

<input name="" type="" placeholder = "", value="">

<!-- text, email, password, button, submit, date, color, file, radio, checkbox -->

The <label> tag

make the site accessible

<label> </label>

connect label and input with for and id attributes

<label for="username"> </label>
<input id="username"> </input>

<!-- OR nested -->
<label>
    TEXT
    <input id="username"> </input>
</label>

simple validations

required attribute validates that an input is not empty
There are also type validations. Try changing "type" from "text" to "email"

The <select> tag

drop down menu

<select name = "">
    <option value=""> </option>
</select>

<textarea>

create input more than one line

<textarea name = "" rows="10" cols="50"> </textarea>

When submit with button, name and value can be send along with the reqest.

fwu11

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web developer bootcamp - HTML

Web developer bootcamp - HTMLgeneral rule:<tagName> Some Content </tagName>Every HTML document we create will start with this boilerplate:<!DOCTYPE html> <html> &lt...
复制链接

扫一扫

专栏目录