Hello everyone, I am a pig arched by cabbage.
1.HTML
Full name Hyper Text Markup Language
Hypertext markup language
Hypertext literally means something other than text (including text)
generally refers to text + audio + video + picture ...
markup language: the browser will perform the corresponding operation when it sees the label, he is writing to Browser language
HTML often writes web static pages, which are executed directly by the browser.
2. Mark (label)
As mentioned earlier, HTML is a markup language, so we implement a page based on tags.
Tags are divided into single tags and double tags .
Commonly used single label: <br/>break row is the meaning of a newline. The newline we write cannot be parsed by the browser, so we need to use tags to help us realize.
In addition, consecutive spaces will also be recognized as one by the browser, we use & nbsp ; Display multiple spaces, & nbsp; & nbsp; & nbsp; means three spaces.
The form of double tags:
<element name> content </ element name>, as <html></html> <head></head> <body></body>
the content we wrote is wrapped in double tags
Let ’s try to write a simple HTML file to
create an HTML webpage
java 右键桌面创建一个txt 修改后缀名.html
<html>
<head>
<titile>这里写网页的标题</title>
</head>
<body>
这里写网页的内容
</body>
</html>
In general, write what we want to show on the page, and write <body></body>invisible things in <head></head>it.
Head and body are equally important.
In addition, the label also has its attributes. Below we briefly introduce a few commonly used and their attributes.
1.font tag
format is
<font face="宋体" size="7" color="green">
<b>静夜思</b>
</font>
size is an attribute of font, representing the size range of the font 1 ~ 7
what font face represents
color is the color of the text, there are two ways to express
(1) use English to describe the color color = “red”
(2) use rgb to go Description color color = "# Red, Green and Blue" Two hexadecimal means that the color ff represents max 00 min If the two are the same, only one can be written. For example, # ff00ff can be written as # f0f.
<b>静夜思</b> 强调
<strong>静夜思</strong> 样式改变
<em>李白</em> 对内容的强调
<i>李白</i> 改变样式
Here the b label is bold, and strong is also bold. But the semantics of the two are different. B emphasizes that strong is just a change of style.
We can correctly use the semantics of tags to enhance the accuracy of content retrieved by search engines. For example, if we search Jingyesi in Baidu, we can search for Jingyesi of tag b, but not strong ones.
em is tilt i and the difference between the two is the same as bold.
2. Form For
Form<table></table> 包裹 <tr></tr>代表行 <td></td> 代表列 行优于列 意思就是先写行才能写列
(1) The attribute border represents the border unit px (pixel)
(2) width and height represent the width and height unit px (pixel), which can also be expressed with a percent sign
(3) align = "center" horizontal center valign = "midlel" Vertically centered
(4) rowspan colspan represents across rows and columns (can be understood as merged cells)
<html>
<head>
<title>
我是大傻逼
</title>
</head>
<body>
<font face="宋体" size="7" color="green">
<b>静夜思</b>
</font>
<br/>
<font face="黑体" size="4" color="#ffff00">
<em>李白</em>
</font>
<br/>
<font face="楷体" size="5" color="blue">
床前明月光，<br/>
疑是地上霜。<br/>
举头望明月，<br/>
低头思故乡。<br/>
</font>
<hr>
<table border="2px" width="200px" height="200px">
<tr align="center">
<td rowspan="2">
1
</td>
<td colspan="2">
2
</td>
</tr>
<tr align="center">
<td>
5
</td>
<td rowspan="2">
6
</td>
</tr>
<tr align="center">
<td colspan="2">
7
</td>
</tr>
</table>
</body>
</html>
The above display results are:
<hr/> 是中间的那条分割线
3. Picture tags
Two attributes: src and alt
<img src="./img.png" alt="图挂了" />
src picture path
(1) 相对路径： 图片和网页的相对位置 ./ 当前路径下 ../ 向上一级
(2) 绝对路径： 图片在系统的绝对位置 C:\Users\hzyc\Desktop\img.png
alt = "" The picture is hanging "
When the path is invalid, the picture fails to load, and the displayed text message
If the picture cannot be found, the value of alt is displayed as shown below
