零基础学前端之HTML 速成【学习笔记】

最新推荐文章于 2024-07-11 21:18:28 发布

D之光

最新推荐文章于 2024-07-11 21:18:28 发布

阅读量653

点赞数 1

分类专栏：零基础学前端学习笔记文章标签：前端 html

本文链接：https://blog.csdn.net/li520_fei/article/details/122402198

版权

零基础学前端学习笔记专栏收录该内容

69 篇文章 15 订阅

订阅专栏

【前端总路线学习笔记】

文章目录

HTML 速成【学习笔记】

HTML 速成【学习笔记】

1. 学习准备

浏览器
- Google Chrome
- Mozilla Firefox
- Safari
- Edge
编辑器
- Visual Studio Code
- Sublime Text
- Atom.io

不想下载编辑器：网页编辑

2. 什么是HTML

HyperText Markup Language(超文本标记语言)。
不是编程语言
告诉浏览器如何构造网页

html结构
[html5参考手册下载，可以找到所有要了解的tag标签,提取码6666])(https://pan.baidu.com/s/1g_hC06F2zMO2LrCZQVufAQ)
html文件组成结构

<!DOCTYPE html> 
<html>
<head>
	<title>Thiis is a Page</title>
</head>
<body>
    
</body>
</html>

3. HTML编写入门

上面的网站往下滑，点击 “Try the Editor”,然后就可以开始编写代码了，下面部分会显示编写出来的效果

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!--这是一个注释-->
	<h1>Heading One</h1>
	<h2>Heading Two</h2>
	<h3>Heading Three</h3>
	<h5>Heading Four</h5>
	<h6>Heading Six</h6>

	<p>这是一个段落</p>
	<p>这是另一个段落</p>
</body>
</html>

也可以用记事本编写，把拓展名改为html，用浏览器打开即可

4. 块级元素和内联元素

块级元素

在页面以块的形式展现
出现在新的一行
占全部宽度

* 例如<div> <h1> <p>

内联元素

通常在块级元素内
不会导致文本换行
只占必要的部分宽度

* 例如<a> <img> <em>加粗 <strong>加粗

5. a的使用

<a href="http://www.baidu.com">百度</a>

超链接有一个target属性：
- 可取值：
  - _blank : 新窗口
  - _self ：当前窗口（默认就是这种方式。）
  - _top ：顶级窗口
  - _parent ：父窗口

<a href="http://www.baidu.com" target="_blank">百度</a>

6. 列表

<!DOCTYPE html>
<html>
	<head>
		<title>列表</title>
	</head>
	<body>
		<!--有序列表-->
		<ol type="I">
			<li>list 1</li>
			<li>list 2</li>
			<li>list 3</li>
			<li>list 4</li>
		</ol>
		
		<!--无序列表-->
		<ul>
			<li>list 1</li>
			<li>list 2</li>
			<li>list 3</li>
			<li>list 4</li>
		</ul>
	</body>
</html>

7. 表格

<!doctype html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<table>
			<!--头-->
			<thead>
				<tr>
					<th>员工编号</th>
					<th>员工薪资</th>
					<th>部门名称</th>
				</tr>
			</thead>

			<!--体-->
			<tbody>
				<tr>
					<td>1</td>
					<td>2000</td>
					<td>技术部</td>
				</tr>
				<tr>
					<td>2</td>
					<td>2000</td>
					<td>销售部</td>
				</tr>
				<tr>
					<td>3</td>
					<td>2000</td>
					<td>销售部</td>
				</tr>
			</tbody>

		</table>
	</body>
</html>

8. 表单

<!DOCTYPE html>
<html>
	<head>
		<title>Form</title>
	</head>
	<body>
	    <br><!--换行-->
	    <br>
	    <hr><!--画水平线-->
		<form action="http://localhost:8080/jd/register">
			<div>
    			<label>Firstname</label>
    			<input type="text" name="username" placeholder="Enter First Name"/>
			</div>
			<div>
    			<label>Lastname</label>
    			<input type="text" name="username" placeholder="Enter Lastname"/>
			</div>
			<div>
    			<label>Emai</label>
    			<input type="text" name = "username" placeholder="Enter Emai"/>
			</div>
			<input type="submit" name="submit" value="submit" >
		</form>
	</body>
</html>

9.图片

<!DOCTYPE html>
<html>
	<head>
		<title>图片img</title>
	</head>
	<body>
		
		<!--
			1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
			2、img标签就是图片标签
			3、src属性是图片的路径
			4、width设置宽度,height设置高度
			5、title设置鼠标悬停时显示的信息。
			6、alt设置图片加载失败时显示的提示信息。
		-->

		<img src="https://img-blog.csdnimg.cn/0cd7fff470a34244a7e4244fcbc8fb95.png" width="100px" title="我是图片哦" alt="图片找不到哦!"></img>
	</body>
</html>

10.引用(别人说过的话)

<!DOCTYPE html>
<html>
	<head>
		<title>图片img</title>
	</head>
	<body>
		鲁迅说过：
        <blockquote>我家门前有两棵树,一颗是枣树,另一颗也是枣树</blockquote>
	</body>
</html>

11. 按钮 button 还有 abbr 和

abbr ：表示它所包含的文本是一个更长的单词或短语的缩写形式
cite ：定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

<!DOCTYPE html>
<html>
	<head>
		<title>图片img</title>
	</head>
	<body>
        <button>This is a button</button>
        
        <p><abbr title="Massachusetts Institute of Technology">MIT</abbr> is a prestigious collage</p>
        <p><cite>MIT is a prestigious collage</cite> by me</p>
	</body>
</html>