html:
一:
超文本标记语言;
不是编程语言;
告诉浏览器如何构建网页。
<!DOCTYPE html> 解释文档类型
<head>
(放一些不被渲染在页![请添加图片描述](https://img-blog.csdnimg.cn/b47d4ac3208a4ae2859385a378f7c055.png)
面主体的东西,比如网页基本信息)
</head>
<body>
(放一些想渲染在网页中给用户看到的主体内容)
</body>
基本练习:
效果:
二:
块级元素:
- 在页面以块的形式展现;
- 出现在新一行;
- 占用全部宽度。
内联元素:
- 通常在块级元素内;
- 不会导致文本换行;
- 只占必要的部分宽度。
(属性一般写在起始标签)
<a href=" " > </a> (超链接)
后面一些基础懒得截图做笔记了,自己在vs里面过了一遍:
<!DOCTYPE html>
<html>
<head>
<title>
你好
</title>
</head>
<body>
<!--标题-->
<h1>heading one</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
<!--段落加超链接-->
<p>这是一段文字</p>
<p>Lorem ipsum dolor <strong> amet </strong> adipisicing elit. Beatae, amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, exercitationem unde pariatur suscipit ullam praesentium, accusamus <a href="https://www.bilibili.com/?spm_id_from=333.33.b_62696c692d6865616465722d6d.1" target="_blank">b站</a> temporibus tenetur, perferendis officiis labore ut. Ex, pariatur cumque maxime magnam architecto veniam commodi!</p>
<!--图像-->
<p>这是一张图像<img src="D:\前端\html\img\QQ图片20211104190709.jpg" alt="加载中" width="100" height="70"></p>
<p>这是一张图像<img src="https://www.w3school.com.cn/i/eg_mouse.jpg" alt="加载中" width="100" height="70" align="left"><p>
<br>
<!--有序列表和无序列表-->
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ol>
<!--表格(表头和表尾)-->
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>color</th>
<th>math</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>小伟</td>
<td>21</td>
<td>red</td>
<td>1</td>
<td>games</td>
</tr>
<tr>
<td>小美</td>
<td>20</td>
<td>yellow</td>
<td>2</td>
<td>games</td>
</tr>
</tbody>
</table>
<br>
<br>
<!--表单-->
<form action="form.js">
<label>firstname</label>
<input type="text" name="firstname" placeholder="Enter firstname" value="right" ><br>
<label>lastname</label>
<input type="text" name="lastname" placeholder="Enter lastname" value="wrong"><br>
<label>email</label>
<input type="text" name="email" placeholder="email" value="12345"><br>
<input type="submit" value="submit">
</form>
<br>
<button>这是一个按钮</button>
<!--引用-->
<blockquote>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi harum obcaecati iste enim atque beatae excepturi, velit pariatur temporibus quod ab cum, possimus officiis porro soluta quae. Nihil, quisquam consequatur.
</blockquote><br>
<!--注释-->
<p><abbr title="ChenLeYi">CLY</abbr> is a good girl</p>
</body>
</html>