- Web front-end learning 10 sections
- HTML learn how to build page structure and content (build a house with a rough house)
- CSS learn how to beautify the page (decoration)
- JavaScript learn how to add dynamic effects to the page
- jQuery JS language framework to simplify native JS development
- The Bootstrap front-end framework encapsulates html/css/JavaScript/jQuery to improve the development efficiency of front-end pages
- Project page
HTML
HyperTextMarkupLanguage: Hypertext Markup Language
- Hypertext: refers to not only plain text but also various font effects and multimedia (pictures, audio, video)
- Markup language format: <start tag attribute='xxx'>tag body</end tag>
- Learning HTML mainly learns what tags are there and how to use them.
###Create HTML page
###Common text labels
- Content heading h1-h6 align=“left/right/center”;On
one line, bold font, with upper and lower spacing - The paragraph tag p is on its
own line, with its own upper and lower spacing - Horizontal dividing line hr
- Bold b
- Italic i
- Small
- Strikethrough s
- Underscore u
- Line feed br Carriage return is not a line feed in the html page, it can only be recognized as a space
###List tag - Unordered list ul:type (control icon) li
- Ordered list ol: type (serial number type) start (starting value) reversed (descending order) li
- List nesting: Ordered lists and unordered lists can be nested arbitrarily.
###图片tagimg
-
src: path
- Relative path: used when accessing resources on the site
- Page and file directory at the same level: write the picture name directly
- The file is on the upper level of the page: .../picture name
- The file is on the next level of the page: folder name/picture name
- Absolute path: Use
picture hotlinking when accessing resources outside the site to save resources on this site, but the picture may not be found (the picture will not be found if the picture path of the original website is changed)
- Relative path: used when accessing resources on the site
-
alt: The text displayed when the picture cannot be displayed normally
-
title: The text displayed when the mouse hovers over the image
-
Width/height: Two assignment methods: 1. Pixel 2. Percentage
-
Supported image format: jpg/jpeg png gif
###HYPERLINKa -
a label package text is a text hyperlink, and the package picture is a picture hyperlink
-
href: The path can point to the page or other files (if the browser supports browsing this file, browse directly, if not, download it)
-
Jump inside the page: back to the top
<a href="#top">回到顶部</a>
###Table label table -
Related tags: table tr td th caption
-
Attributes: table: border, cellspacing, cell spacing, cellpadding, distance between cells and content td: colspan, rowspan, and rows
###Form -
Role: Obtain various information entered by the user and submit it to the server
-
The main learning form is which controls are in the form (text box, password box, submit button, single selection, multiple selection, drop-down selection, etc.)
Exercise
1. List exercises
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul type="square">
<li>裴擒虎</li>
<li>上官婉儿</li>
<li>吕布</li>
<li>马超</li>
<li>苏烈</li>
</ul>
<ol type="1" start="10" reverse="reversed">
<li>打开冰箱门</li>
<li>把大象装进去</li>
<li>关上冰箱门</li>
<li>该吃饭了</li>
</ol>
<ul>
<li>凉菜
<ol>
<li>拍黄瓜</li>
<li>芥末鸭掌</li>
<li>花毛一体
<ul>
<li>花生</li>
<li>毛豆</li>
</ul>
</li>
</ol>
</li>
<li>热菜
<ol>
<li>红烧肉</li>
<li>水煮鱼片</li>
<li>地锅鸡</li>
</ol>
</li>
</ul>
</body>
</html>
display effect:
2. Hyperlink exercises
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a id="top" href="01第一个页面.html">01第一个页面</a>
<a href= "http://www.baidu.com">百度</a>
<a href="1.jpg">图片</a>
<a href="http://www.tmooc.cn"><img width="20%" height="20%"src="1.jpg"></a>
<img width="20%" height="20%" src="../imgs/1.jpg">
<img width="20%" height="20%" src="../imgs/2.jpg">
<img width="20%" height="20%" src="../imgs/3.jpg">
<img width="20%" height="20%" src="../imgs/4.jpg">
<img width="20%" height="20%" src="../imgs/5.jpg">
>
<!-- #代表当前页面-->
<a href="#top" >回到顶部</a>
</body>
</html>
Display effect:
3. Table exercise
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- border边框
cellspacing单元格间距
cellspacing单元格距内容的距离-->
<table align="center" border="1" cellspacing="10" cellpadding="10">
<caption>表格标题</caption>
<!-- tr表示行 th表头 td表示列 -->
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>尼古拉赵四</td>
<td>29</td>
</tr>
</table>
<table border="" cellspacing="" cellpadding="">
<!--colspan跨列-->
<tr><td align="center"colspan="2">1-1</td><td rowspan="2">1-3</td></tr>
<tr><td rowspan="2">2-1</td><td>2-2</td></tr>
<tr><td align="center"colspan="2">3-2</td></tr>
</table>
</body>
</html>
Display effect:
4. Form exercise
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- action服务器地址 method提交方式 -->
<form action="http://www.tmooc.cn" method="get">
<!-- 文本框 name是对传递过去的参数做介绍 id唯一标识
value值设置文本框的值-->
名字：<input type="text" name="username"
placeholder="请输入用户名" id="" value=""/>
<br/>
密码：<input type="password" name="pwd"
placeholder="请输入您的密码" id="" value=""/>
<hr>
性别：<input type="radio" checked="checked" name="gender" id="" value="m" />男
<input type="radio" name="gender" id="" value="f" />女
<hr>
<!-- 多选和单选类似 -->
爱好: <input type="checkbox" checked="checked" name= "hobby" id=""
value="cy" />抽烟
<input type= "checkbox" name="hobby" id=""
value="hj" />喝酒
<input type="checkbox" name= "hobby" id=""
value="tt" />烫头
<!-- label扩充点击范围 -->
<input type="checkbox" name="hobby" id="dbj" value="dbj"/>
<label for="dbj">大保健</label>
<hr >
<!-- 日期选择器 -->
生日：<input type="date" name="birthday" id="birthday" />
<input type="submit" value="注册"/>
<hr >
<!-- 文件选择器 -->
靓照：<input type="file" name="pic" id="pic" />
</form>
</body>
</html>
display effect:
5. Picture exercises
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- alt：图片不能显示时显示文本 -->
<img alt="这显示不出来" src="a1.jpg">
<!-- title：鼠标悬停时显示的文本 -->
<img width="100" height="100" title="这是个头像" src="../2.jpg">
<img width="100" height="100" src="abc/3.png">
<img width="20%" height="20%" src="../imgs/4.jpg">
<!-- 绝对路径访问站外资源，又称为图片盗链
好处：节省本站资源
坏处：有可能找不到图片-->
<img width="20%" height="20%" src="http://cdn.tmooc.cn/bsfile//courseImg///280c6025caa14649ba86b3561db92066.jpg">
</body>
</html>
Display effect: the 
code has been packaged, the connection is as follows https://download.csdn.net/download/qq_44273429/12700036 to
be continued...
Link to the next section:
Web front-end basics (02)