HTML and CSS are two parts
to sum up:
- The html part only needs to remember individual commonly used tags.
- CSS has a lot of styles, so just remember the commonly used ones.
- At the beginning stage, you can't just check it. After doing more projects in the later stage, you will know which ones are commonly used. And this is just a simple accumulation and summary for learning html+css in the early stage. In fact, the framework is used more in the later stage. So this article does not mention the responsive design of frames and pages.
ps: Frame: Just use it directly without writing it yourself, just change individual parameters.
Responsive design: It means that the mobile phone looks at the mobile phone page, and the computer looks at the computer page, so there will be no conflicts.
text:
HTML
1. Related concepts
1. What is html?
- HTML is a language used to describe web pages.
- HTML refers to Hyper Text Markup Language (Hyper Text Markup Language)
- HTML is not a programming language, but a markup language
- Markup language is a set of markup tags
- HTML uses markup tags to describe web pages
2. Label
- HTML tag tags are usually called HTML tags (HTML tags).
- HTML tags are keywords surrounded by angle brackets, such as
- HTML tags normally come in pairs like and
- The first tag in the tag pair is the start tag, and the second tag is the end tag
- Start and end tags are also called open tags and closed tags
3. Commonly used (*) [see code for details]
个人补充：标签有很多，但是其实大部分都是在网页前期用的多，
使用html写样式，如<strong>、<center><font>等标签，对于初学者极不友好。
但是通常熟悉记住以下标签，就可以了。因为现在大部分样式都是用css来确定的。
1. <html> <head> <body>
2. <p> <div> <h1-h6> <a> <img> <span> <table> <ul> <ol> <iframe>
3. 知道有就行，用处不多。<br /> <hr />（见5）
- A simple understanding of block-level elements and inline elements is the difference between a block and a long strip.
4. Subtle knowledge
You don’t need to remember it, you can understand it over time and think it is “obvious”.
- HTML elements start with an opening tag
- HTML elements are terminated by closing tags
- The content of the element is the content between the start tag and the end tag
- Some HTML elements have empty content
- The empty element is closed in the opening tag (ends with the end of the opening tag)
- Most HTML elements can have attributes
- Case is not sensitive to a certain extent, but lower case is recommended.
5. Attributes in html, just understand it, more use CSS later
align 居中；bgcolor 背景色；border 边框
https://www.w3school.com.cn/tags/index.asp 完整参考手册（不用记)
文本格式化：<em> <b><sub><sup>等等等
引用：<q> <blockquote> <abbr><dfn>等等等
7. Comments
<!-- This is a comment -->
8. Other:
- Path-relative path and absolute path.
- URL-"Uniform Resource Locator"-simply a web address.
- Colors-https://www.w3school.com.cn/html/html_colors.asp
- Document statement, such as:
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
简单说，就是告诉电脑这是个网页，用网页的方式把“爷”打开。
上面依次是HTML 5/HTML 4.01/XHTML 1.0三个版本的声明方式。
Two, the code
1. Basic "skeleton"
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div></div>
</body>
</html>
2. Basic label
1.标题 1-6
<h1></h1>
2.<p></p> P标签，段落 对应的 <span>行内元素</span>
3.<div></div> “块”
4.<a></a> 超链接
<a href=""> 显示 </a>
target 是否弹出新窗口
name/id 锚属性 （如返回到top）
5.<img> 插图
<img src="" width="" height="" alt="提示" title=""/>
6.表格
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<th></th> 表头
<td></td> 空表格
<caption></caption> 标题
7.列表
无序
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
3.表单
<form>
<input />
</form>
输入文本
<input type="text" name="firstname">
密码
<input type="password" name="psw"
提交
<input type="submit" value="Submit">
单选框
<input type="radio" name="sex" value="female">Female
复选框
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
按钮
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
其他了解即可
https://www.w3school.com.cn/html/html_form_input_types.asp
https://www.w3school.com.cn/html/html_form_attributes.asp
单选按钮
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
提交表单
<form action="***.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
https://www.w3school.com.cn/html/html_forms.asp
action,name等等，同时还可以将文本提交到后台，还有get/post等方法(method)。
其他
下拉菜单
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
文本域
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
按钮
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
CSS
1. Related concepts
1. What is CSS?
- CSS refers to Cascading Style Sheets (Cascading Style Sheets)
- CSS describes how to display HTML elements on screen, paper or other media
- CSS saves a lot of work. It can control the layout of multiple web pages at the same time
- External style sheets are stored in CSS files
2. Common attributes and other see codes
3. Annotation
/* 这是一条单行注释 */
/* 这是
一条多行的
注释 */
Two, the code
1. Quote CSS code
- If you are not sure at the beginning, how to write it. For example, it is easy to be messy with external styles, just write inline, then change to internal style, and finally package and write into external style.
外部样式：
<head>
<link rel="stylesheet" type="text/css" href="***.css">
</head>
内部样式：
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式：
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
2. Basic attributes
1.关于背景
background-color 背景色
opacity: 0.3; 不透明度
background-image: url("**.gif") 背景图片
background-repeat 背景重复
background-size 背景图像尺寸
background-attachment 背景图像固定
https://www.w3school.com.cn/css/css_background_attachment.asp
2.font-family、color、font-size 字体、颜色、大小
3.text-align 文本对齐
4.颜色 可以直接使用orange这种也可以使用#ffffff，还有rgb(255, 99, 71)
5.边框
border-width；border-color；border-style；
border：2px solid blue 边框宽度为2px直线蓝色框
border-radius 边框弧度
其他了解
https://www.w3school.com.cn/css/css_border.asp
6.外边距和内边距
【top，right，bottom，left】margin；padding
margin外边距
简写：
margin: 20px 20px 20px 20px 从左边逆时针
margin: a b c d a-c对应，b-d对应
margin：10px 20px 左右10，上下20
margin：10px 20px 30px 左10，上下20，右30
padding内边距同理。
7.width和height
同6
8.盒模型
如下图，所以把写网页当做三维的“俄罗斯方块就行了”，每个div就是对应的方块。
轮廓文本等就不在赘述了。
https://www.w3school.com.cn/css/css_text.asp