Thank you for having such a basic thing and friends come to appreciate it,
Hello, this is Ken
Afterwards, Ken will continue to update the basics of HTML and CSS in this column,
mainly based on textbooks and teaching materials, supplemented
by self-study website resources. Friends who want to learn by themselves or look back and review them can come and get together. Hahaha
I'm very ashamed of the recent negligence to adjust the state.
Always thinking about things that are not in line with my age, always thinking about everything that can be considered, constantly putting pressure on myself and some small things that are not troublesome but scattered, and the mentality has not been very optimistic
, and I am just An ordinary person with low learning efficiency
may be a bit lost_
But when a person tastes loneliness,
he smiles and reconciles with the world
When you have questions about yourself,
it’s time for you to change
1.1_html basics
1.1.1_html5 document basic format and HTML markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>
- The <!doctype> tag
is at the front of the document. Using the DOCTYPE declaration of html5 will trigger the browser to display the page in standard compatibility mode, so that the browser can use the page as a valid html document.
<!doctype html>
- <html> tag
This tag is located after the <!doctype> tag, which means the beginning and end of the html document, and the head and body content of the document are in between. - <head> tag
After the <html> tag, define the head information of the html document, also called the head tag. - <body> tag
body tag - Single and double mark in html
- Double mark
<标记名>内容</标记名>
- Single mark
<标记名/>
- Comment mark
<!--注释语句-->
<!--这就是注释标记-->
1.1.2_HTML5 syntax
- Labels are not case sensitive
<p>这里的p标签大小写不一致</P>
Although the case of the start tag and the end tag of the p tag does not match, the syntax is completely legal in html5.
- Allow attribute values without quotes
<input checked=a type=checkbox/>
<input readonly=readonly type=text/>
The above code is equivalent to
<input checked="a" type="checkbox"/>
<input readonly="readonly" type="text"/>
- Allow attribute omission of some attribute values
<input checked=“checked” type="checkbox"/>
<input readonly="readonly" type="text"/>
Can be omitted as:
<input checked type="checkbox"/>
<input readonly type="text"/>
1.1.3_ attributes of the tag
<标记名 属性1="属性值1" 属性2="属性2"...>内容</标记名>
Markers can have multiple attributes in no particular order.
For example:
<h1 align="center">内容</h1>
1.1.4_HTML5 document head related tags
These tags are usually written in the head tag
- Set page title tag <title>
<title>网页标题名称</title>
- Define page meta information tag <meta/>
- Reference external file tag <link>
- Inline style tag
1.2_ Text control mark
1.2.1 Title and paragraph marks
- Title tags
include <h1>~< h6>
< hn align="对齐方式">内容< /hn>
left: Set the left alignment of the title text (default value)
center: Set the center alignment of the title text
right: Set the right alignment of the title text
- Paragraph mark
< p align="对齐方式">内容< /p>
- Horizontal line mark< hr/>
< hr 属性=“属性值” />
| Attribute name | meaning | Attribute value |
|---|---|---|
| align | Set the alignment of horizontal lines | Three values of left, right, center can be selected, the default is left |
| size | Set the thickness of the horizontal line | In pixels, the default is 2 pixels |
| color | Set the color of the horizontal line | Available color names, hexadecimal #RGB, rgb(r, g. b) |
| width | Set the width of the horizontal line | It can be a certain pixel value or a percentage of the browser window. The default is 100% |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>水平线标记的用法和属性</title>
</head>
<body>
<p>传智播客专业于Java、.NET、 PHP、 C/C++、网页设计、平面设计、UI设计。从菜鸟到职场达人的转变就在这里，你还等什么? </p>
<hr />
<P align="left">Java学院</p>
<hr color="red" align="left" size="5" width="600"/>
<P align="center">网页平面设计学院</p>
<hr color="#066F" align-"right" sizem"2" width="508"/>14 <P align="right">PHP学院</p>
</body>
</html>
The results of the operation are as follows:
4. Line break mark< br/>
1.2.2_ Text formatting mark
1.2.3_Special character mark
1.3_Image tag
The commonly used image formats are mainly GIF, JPG and PNG.
Small pictures such as icons and buttons on the web are recommended to use GIF or PNG format, transparent pictures are recommended to use PNG format, pictures similar to photos are recommended to use JPG format, and dynamic pictures are recommended. GIF format.
1.3.1_Image tag <img />
<img src="图像URL"/>
Example: The
code is as follows:
running result:
1.3.2_ absolute path and relative path
-
Absolute
path_ The
absolute path is the real path of the file or directory on the webpage on the hard disk, such as "D:\HTML5+CSS3\images\logo.gif", or the complete network address, such as http://www.itcast. cn/images/logo,gif".
_It
is not recommended to use absolute paths in web pages, because we need to upload all files to the server after the web page is created. That is to say, it is very likely that "D:\HTML5+CSS3\images\" logo.gif" such a path. -
Relative path
_
the relative path is relative to the current file, relative path without a drive letter, usually in HTML page document as a starting point, the position of the target image is described by the hierarchy.
_To
sum up, the relative path settings are divided into the following three types.
_
(1) The image file and the HTML file are located in the same folder: just enter the name of the image file, such as <img src="logo. gif" />.
_
(2) The image file is located in the next level folder of the HTML file: enter the folder name and file name, separated by "/", such as <img src="images/logo.gif"/>
_
(3) The image file is located in the upper level folder of the html file: add "…/" before the file name, if it is the upper two levels, you need to use ".../.../" and so on, such as <img src="logo.gif />
1.4_ Hyperlink mark
1.4.1_ Create Hyperlink
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
- The <a> tag is used to define a hyperlink, href and target are its common attributes
- href: used to specify the URL address of the link target
- target: Used to specify how to open the linked page. Its values are _self and _blank,
_self means to open in the original window, _blank means to open in a new window
Examples:
Code:
After running:
Click the hyperlink to pop up a new window:
1.4.2_ anchor link
Direct example:
Code: After
running the following two pictures, click "click me" on the first picture to jump to "here" on the second picture:
I will definitely try my best
to live up to myself
and my relatives and friends
I am Ken,
we will have a period later