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

2022年01月14日 阅读数:5
这篇文章主要向大家介绍零基础学前端之HTML 速成【学习笔记】,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

【前端总路线学习笔记】
html

HTML 速成【学习笔记】

1. 学习准备

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

2. 什么是HTML

  • HyperText Markup Language(超文本标记语言)。
  • 不是编程语言
  • 告诉浏览器如何构造网页
  1. html结构
    请添加图片描述前端

  2. [html5参考手册下载,能够找到全部要了解的tag标签,提取码6666])(https://pan.baidu.com/s/1g_hC06F2zMO2LrCZQVufAQ)html5

  3. html文件组成结构
    请添加图片描述web

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

3. HTML编写入门

  1. 上面的网站往下滑,点击 “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>
  1. 也能够用记事本编写,把拓展名改成html,用浏览器打开便可

4. 块级元素和内联元素

  1. 块级元素
  • 在页面以块的形式展示
  • 出如今新的一行
  • 占所有宽度
* 例如<div> <h1> <p>
  1. 内联元素
  • 一般在块级元素内
  • 不会致使文本换行
  • 只占必要的部分宽度
* 例如<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>
		
		<!--
			一、设置图片宽度和高度的时候,只设置宽度,高度会进行等比例缩放。
			二、img标签就是图片标签
			三、src属性是图片的路径
			四、width设置宽度,height设置高度
			五、title设置鼠标悬停时显示的信息。
			六、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>