小白保姆级教程——HTML基础

最新推荐文章于 2024-09-12 19:13:21 发布

SimonMa_

最新推荐文章于 2024-09-12 19:13:21 发布

阅读量3.5w

点赞数 3

文章标签： html html5 css

本文链接：https://blog.csdn.net/qq_45781655/article/details/112693347

版权

开始前需要做的准备

浏览器

1.Goole Chrome
2.Firefox
3.Safari
4.Edge

编辑器

1.VS Code
2.Sublime Text
3.Atom.io

什么是HTML

—超文本标记语言
—不是编程语言
—告诉浏览器如何构造网页

Tag

介绍

一对尖括号括起来的代码叫做HTML Element
前面的尖括号叫做Opening Tag，后面的叫做Closing Tag

Html界面

<!DOCTYPE html>
<html>
	<head>
		<title>This is a page title</title>
	</head>
	<body>
		<!-- 注释 -->
		<h1>This is a heading one</h1>
		<h2>This is a heading two</h2>
		<h3>This is a heading three</h3>
		<h4>This is a heading four</h4>
		<h5>This is a heading five</h5>
		<h6>This is a heading six</h6>
		<p>This is a paragraph</p>
		<p>This is a paragraph</p>
	</body>
</html>

块级元素

—在页面以块的形式展现
—出现在新的一行
—占全部宽度
—如：<div> <h1>-<h6> <p>

内联元素

—通常在块级元素内
—不会导致文本换行
—只占必要的部分宽度
—如：<a> <img> <em> <strong>

常用Tag

strong

<p><strong> Tag </strong></p>

–> Tag (加粗效果)

em

<p><em> Tag </em></p>

–> Tag (斜体效果)

a

<p><a href="https://google.com"> Lorem </a></p>
   |<---------属性--------->|，属性一般都放在前面的尖括号中.

添加超链接，点击超链接会覆盖旧页面

<p><a href="https://google.com" target="_blank"> Lorem </a></p>

添加此属性便可在新页面打开超链接

abbr

<p><abbr title="This is a college">AHU</abbr> is a good college</p>

鼠标放在abbr里的字时会显示title里的标注

ul

<ul>
	<li>list 1</li>
	<li>list 2</li>
	<li>list 3</li>
	<li>list 4</li>
</ul>

显示时前面没有数字哦

ol

<ol>
	<li>list 1</li>
	<li>list 2</li>
	<li>list 3</li>
	<li>list 4</li>
</ol>

显示时前面有排序数字

table

表格的基本格式
<table>
	<!-- 表头元素 -->
	<thead>
		<tr>
			<th>name</th>
			<th>age</th>
			<th>sex</th>
		</tr>
	</thead>
	<!-- 表内元素 -->
	<tbody>
		<tr>
			<td>张三</td>
			<td>18</td>
			<td>男</td>
		</tr>
		<tr>
			<td>李四</td>
			<td>19</td>
			<td>男</td>
		</tr>
		<tr>
			<td>王五</td>
			<td>100</td>
			<td>女</td>
		</tr>
	</tbody>
</table>

br&&hr

<br><hr>

br:生成一个空行；hr:生成一行线

form

<form action="form.js" method="POST">
	<div>
		<lable>name</lable>
		<input type="text" name="name" placeholder="please enter your name">
	</div>
	<div>
		<lable>age</lable>
		<input type="number" name="age" placeholder="please enter your age">
	</div>
	<div>
		<lable>sex</lable>
		<input type="text" name="sex" placeholder="please enter your sex">
	</div>
	<input type="submit" name="submit" value="SUBMIT">
</form>

img

<img src="照片的地址" alt="照片无法查找到时显示的文字">

上文展示的所有操作源代码