HTML: Describes the skeleton of a web page [static]
CSS: Describes the style of a web page [static]
JAVASCRIPT: describes the behavior of a web page (how to interact with users) [dynamic]
HTML
- HTML is organized by tags. The shape is
<html> </html>organized in angle brackets, and the tags appear in pairs, also known as elements. - A label usually appears in pairs,
<html>the start label,
</html>the end label,
and the content of the label between the labels - Labels can be nested. The content of a tab can be other tabs. These tags form a tree structure
- It can be given to the tag in the start tag
属性（attribute）. Attributes are equivalent to key-value pairs, and there can be one or more.
Enter!, and press the TAB key to generate a basic page. This function is called emmet shortcut key.
<!DOCTYPE html> <!--language的缩写 -->
<html lang="en"> <!--English 描述网页中语言为英文 -->
<head>
<!--meta 是单标签，没有结束标签-->
<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>
hello
</body>
</html>
Label
annotation label
<!-- 这是注释 -->
ctrl + / Quick comment
ctrl + enter to change to new next line
title tag
when writing tags
- Write
<h1>, it will be automatically completed later - Write h1 and press tab
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
Each title tag is on a single line, whether it is exclusive to one line has nothing to do with the writing of the code.
In HTML, whether the label wraps has nothing to do with the writing of the code, but has something to do with the label itself. Some labels occupy a single line, and some labels do not.
Newlines in source code in HTML are ignored,
spaces: multiple spaces are ignored or ignored as one.
paragraph tag
<p>Label
<p> </p>
Lorem + TAB automatically generates a piece of random text to help us debug the display effect
newline tag
<br>single label, newline
<strong>变粗</strong>
<b>变粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
image tag img
The core attribute of img is src, which describes the path of the image. The
path can be a local absolute path, a relative path, or a network path.
<img src="./11.png">
<img src="11.png" alt="这是一张风景照">
<img src="E:\java\java-learning\4.EEcode\html\11.png">
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.Mkbsjfl7dnRRR8GeELHYIgHaEg?w=289&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7">
altAttribute: When the network speed is relatively slow, when the picture is hung, a word will be displayed
titleAttribute: When the mouse hovers over the picture, a prompt will be given:
width / height describe the size of the picture, width and height can be set at the same time, or only one can be set , if only one is set, the other will be scaled proportionally. unit px pixel
hyperlink label a
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sogou.com">搜狗</a>
<a href="http://www.sogou.com" target="_blank">搜狗</a>
target="_blank": Create a new page without replacing the original label
form tab
table: the entire table
tr: a row
td: a cell
th: a cell in the header
<table width="500px" height="300px" border="1px" cellspacing="0">
<tr>
<th>姓名</th>
<th>电话</th>
</tr>
<tr>
<td>张亦可</td>
<td>10086</td>
</tr>
<tr>
<td>张士大</td>
<td>10342</td>
</tr>
<tr>
<td>张覆盖</td>
<td>19991/td>
</tr>
</table>
One sentence of css to center all the elements in the td horizontally
<style>
td {
text-align: center;
}
</style>
list label
- list item li
- Ordered list ol
ordered list - ul
unordered list
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Enter tags:
form
Use form for front-end and back-end interaction, and submit the user's operations/inputs on the page to the server.
form form + button:submit submit button
input
<input type="text">
<input type = "password">
<input type="radio" name="gender" checked="checked"> 男
<input type="radio" name="gender"> 女
<br>
多选
<input type="checkbox" name="" id=""> 吃饭
<input type="checkbox" name="" id=""> 睡觉
<input type="checkbox" name="" id=""> 玩耍
<input type="checkbox" name="" id=""> 上课
<input type="button" value="this is button" onclick="alert('hello')">
<input type="submit" value="">
<input type="file" name="" id="">
<textarea name="" id="" cols="30" rows="10"></textarea>
Common tags that accept user input from users are:
- input.text : single line text box input
- input:password : password input
- input:radio : Radio buttons, for radio buttons, generally add the name attribute, the radio buttons with the same name attribute, the values are mutually exclusive.
- input:checkbox : Multi-choice, you can choose more than one.
- input:button: button, value button value. For what to do after the button is clicked, you need to cooperate with js
- input:submit: Submit button, used with form. The appearance is similar to the button, which will trigger the interaction between the form and the server.
- input:file: file selection box, let the browser select the file on the local hard disk, and then submit it to the browser.
- select + option : drop-down menu option
- textarea: multi-line edit box
- input:date/datetime/color ：
When submitting, the name is used as the key, and the user's input or the value attribute in the input is used as the value when submitting.
For single selection and multiple selection, only those with the same name are considered as a group
div span
div span has no semantic label.
div is a block-level element that occupies one line by default.
span is an inline element that does not occupy one line by default.
HTML can go to MDN to check, MDN is related documents