Detailed introduction to HTML a, img, table and form tags
HTML entry notes 2
One a tag
a tag attributes: href, taiget, download, rel=noopener.
a tag function: mainly used to jump to external pages, internal pages or phone mailboxes, etc.
The code is like this<a href=""></a>
i
1 href
Note: href is the input address, you can input 1.1 URL , 1.2 path , 1.3 pseudo protocol , 1.4 id anchor , 1.5 mailbox, etc.
- Note : Never double-click to open the html, the user always enters the URL, and we have to use the web page input to open it like a user.
- Open the input URL, Method One: Enter the terminal installation
yarn gloal add http-server
input After installinghttp-server . -c-1
here can be ignored, -c is cached, -1 is not cached. "." Yarn is recommended.
Then there will be several addresses, copy the address or open it directly and connect the file to be opened in the address bar.- Method 2: Terminal input installation After
yarn global add parcel
installation, directly parcel xxx.html
xxx is the name of the opened file
1.1 URL
Href can enter the URL, the value is for example:
- https://baidu.com
- http://baidu.com
- //baidu.com
Note : It is best to choose //baidu.com, that is, no-protocol URL. When you click on the link, it will automatically jump to select http or https to prevent errors in selecting the wrong http or https.
To see how it is transmitted, you can open the web development tool (F12) and select Preserve log in netwok to view
1.2 Path
href can enter the path, for example:
- /a/b/c
- a/b/c
Note: /a/b/c, "/" is not the root directory?
Answer: When we use http, it is no longer a file. The root directory is where the service is opened.
During development, if you double-click to open the link page, it is in the form of a file and will be searched in the file root directory. The link is invalid and the absolute path is wrong. To open in web form
1.3 Pseudo agreement
What is a pseudo-protocol? Clicking on the a tag will execute the code in href, which is called JavaScript pseudo-protocol.
<a href="javascript:alert(1);">javascript伪协议</a>
1.4 id anchor
You can jump to the page by clicking the content of the a tag
<p id="xxx">你点击了查看</p>
<a href="">查看（页面会刷新）</a>
<a href="#">查看(页面不会刷新，会跳到页面顶部)</a>
<a href="#xxx">查看（通过id跳转到指定的标签，锚点)</a>
<a href="javascript:;">查看（这才是什么也不会做的a标签）</a>
1.5 Mailbox etc.
- Jump mailbox
<a href="mailto:[email protected]">发邮件给我</a>
Effect: Email me
- Jump phone
<a href="tel:13258378250">请打电话给我</a>
Effect: please call me
2 target attribute of a
Target means "target". Target has the following commonly used values:
2.1 _blank
Open in a new window
2.2 _top
If there are multiple web pages nested, it will open in the topmost window. You can nest websites with
iframes.
2.3 _parent
Open one level above the current link
2.4 _self
Open on your own level
2.5 xxx
Note: When xxx is taiget="xxx", xxx is the id, you can take it whatever you want, open it when there is xxx, and create a window when there is no xxx, call it xxx.
Note: When two links are called xxx, click different links of the same xxx, and each click will execute the clicked link in the xxx window.
two img tag
The role of the img tag: send a get request to display a picture.
Attributes are: alt / height / width / src
Event: onload / onerror
Responsive: max-width: 100%;
replaceable elements
1 attribute
1.1 alt
alt is the text of the alt content to prompt the user when the image fails to load
1.2. height和width
Picture height and width. Just write width or height, the height or width of the picture will be adaptive, writing width and height together will deform the picture.
Note: Never deform the picture
1.3. src
English source, source. The map's address.
2 events
onload and onerror are
used to monitor whether the image is loaded successfully, execute onload if it succeeds, and execute onerror if it fails. Is a user remedy.
<body>
<img id="xxx" width="400" src="1.gif" alt="加油动图" />
<script>
xxx.onload = function () {
console.log("图片加载成功");
};
xxx.onerror = function () {
console.log("图片加载失败");
xxx.src = "/图片加载失败.png";
};
// id测试时用，平时别用
</script>
</body>
The successful results are as follows:
The failure effects are as follows:
3 Responsive
Responsive to add about the picture max-width: 100%;style image can be adapted to a mobile phone
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
}
</style>
three table tag
1 attribute value
There are only three labels that can be used in the table label. They are thead, tbodyand tfoot, the order in which they are written is irrelevant. The arrangement is only head, body and feet. Among the three, you can write tr(table row, representing a row in the table), td(content data), th(representing the header).
Not much to say, look at the code
<body>
<table>
<thead>
<tr>
<th>英语</th>
<th>翻译</th>
</tr>
</thead>
<tbody>
<tr>
<td>hyper</td>
<td>超级</td>
</tr>
<tr>
<td>target</td>
<td>目标</td>
</tr>
<tr>
<td>reference</td>
<td>引用</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>空</td>
<td>空</td>
</tr>
</tfoot>
</table>
</body>
The effect is as follows:
2 Related styles
Related Styles: table-layout, table-collapse, border-spacing. Generally used to clarify the table style.
<style>
table {
table-layout: auto; /*计算每行宽高，由内容大小决定宽高*/
/* table-layout: fixed;尽量每一行平均 */
border-collapse: collapse;
/* collapse合并边框 */
border-spacing: 0;
/* border和border之间的距离 */
}
</style>
four form form
Function: Send a get or post request, and then refresh the page.
Attribute: action / autocomolete / method / target
Event: onsubmit
Note : A form must contain type equal to "submit" before it can be submitted. If the button does not write submit, the default is submit.
If type="button", the submission cannot be made. Each input must have a name.
1 input attribute
1.1 action
The src equivalent to img is where the request is sent . It is used to control which page is reached, what is written in the action, and which page the request goes to.
<body>
<form action="/xxx">
<input name="username" type="text" />
<input type="submit"/>
</form>
</boody>
type="text" is a text box, type="submit" is a submission.
1.2 method
Used to control whether the request is post or get.
<form action="/xxx" method="POST"></form>
1.3 autocomplete
Auto fill. There will be a history input prompt after the mouse is moved in.
<form action="/xxx" method="POST" autocomplete="on">
<!-- on是打开提示，off是关闭提示 -->
<input name="username" type="text" />
<input type="submit" />
The effect is as follows:
1.4 target
Which page is submitted to, which page will be refreshed.
There are many type attributes, type=color (change the color), password (input as * input box), checkbox and raido (multi-select box and single-select box, let those with the same name represent a group), file ( Multipe can be added to indicate that multiple files can be selected), hidden (hidden)
2 textarea
<textarea style="resize: none; width: 50%; height: 300px"></textarea>
It can be pulled freely without style.
3 select
<select>
<option value="">-请选择-</option>
<option value="1">一</option>
<option value="2">二</option>
<hr />
<input type="text" required />
</select>
Select box, value is the real value. One, two is the value for users
The effect is as follows:
4 attributes
- onchange is triggered when user input changes
- onfocus Triggered when the user focuses the mouse on this
- onblur Use the mouse to come out onblur
5 validator
HTML 5 new features
<input type="text" required />
If there is nothing in the input box and submit it, the submission is not allowed, and the verification is provided.
The effect is as follows
6 Matters needing attention:
Generally, the click event of input is not monitored.
The input in the form must have a name. If there is no name, it is wrong.
Put a type="submit" in the form to trigger the submit event.
What is the difference between form submission and button submission?
<form action="/xxx" method="POST" autocomplete="off" target="a">
<input name="username" type="text" />
<input type="submit" value="<strong>搞起</strong>" />
<button type="submit"><strong>搞起</strong> <img src="1.gif" />
</button>
</form>
The input does not support other tags, only plain text, and anything can be added to the button.
7 Other tags:
- video
- audio
- anvas drawing
- svg vectorization
Generally, there are problems with compatibility, and the compatibility of these tags must be read in the documentation!
I am on my way to learn the front end from entry to soil. Every time you browse, like, comment and collect, it is your greatest encouragement to my learning journey. Let's work hard together!
Welcome to leave your valuable comments.
Finally,
the field expanded immeasurable space at
