HTML基础知识概括

BoboChicken

已于 2022-03-08 19:24:06 修改

阅读量248

点赞数 2

文章标签： html 服务器前端

于 2022-03-08 19:11:53 首次发布

本文链接：https://blog.csdn.net/BoboChicken/article/details/123360687

版权

HTML基础

<h1> 代表标题一，h2 代表标题二，以此类推。。。（完全可以类比md中的# ，## ）
<p> 代表段落，而且是格式化的段落。
<main> 包含的是本HTML的主要内容，仅作为一种信息提示。
id=... “id” 可以给一个标签加上在本HTML中独一无二的标记。

eg：<p id="contacts-header">Hello World</p>
<a> 这个相当重要，可以理解为超链接
1. ```
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
```
  属性"href"里是跳转的地址，中间文本的内容是会显示的内容。
2. ```
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
```
  "href"可以根据"id"进行内部跳转
3. ```
<p>
  Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
</p>
```
  好好理解这句话，第一<a>嵌套进了文本中，第二注意属性target="_blank"，意思是会再重新打开一个页面进行跳转。
<img src="xxx" alt="xxx"> 可以在HTML中显示一张图片

src 表示照片地址；

所有的 img 元素必须有 alt 属性。 alt 的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。

注意：img 是没有结束标签的

eg：<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="a cute cat">
<ul> 表示无序列表 ，中间包含一个或多个<li> 元素

eg：
```
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
```
ol 表示有序列表，中间包含一个或多个<li> 元素

eg：
```
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>
```
input 输入框可以获得用户的输入

注意： input 是没有结束标签的

eg：

<input type="text">
给输入框添加占位符文本：占位符文本用户在 input 输入框中输入任何东西前的预定义文本。

eg：

<input type="text" placeholder="this is placeholder text">

可以帮助提示用户如何输入内容
1. 创建一个表单
  
  我们可以只通过 HTML 来实现发送数据给服务器的表单，只需要给 form 元素添加 action 属性即可。
  
  eg：
```
<form action="url-where-you-want-to-submit-form-data">
  <input>
</form>
```
  属性action表示表单数据将上传到地方的url
2. 给表单添加提交按钮
  
  eg：
```
<button type="submit">submit</button>
```
3. 给表单添加必填字段
  
  给字段（输入框）input添加属性required，只有当用户填写了该字段（输入框）后才能提交表单
  
  eg：
  
  <input type="text" required>

创建一组单选按钮

单选按钮是input选择框的一种类型，要使用label包裹input，label和input的关联用"for"和"id"来绑定

举一个单选按钮的例子：

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>

注意：一组单选按钮的所有"name"必须相同，"name"可以起到串联起一组单选按钮。

下面再举一组单选按钮的例子：

<form>
    <label for="boy">
        <input id="boy" type="radio" name="sex">boy
    </label>
    <label for="girl">
        <input id="girl" type="radio" name="sex">girl
    </label>
</form>

复选框

复选框就好比多项选择题，它与单选按钮类似，不同的是input的属性"type"要改为"checkbox"

下面举一个复选框的例子：

<form>
    <label for="boy">
        <input id="boy" type="checkbox" name="sex">boy
    </label>
    <label for="girl">
        <input id="girl" type="checkbox" name="sex">girl
    </label>
</form>

单选框和复选框的value值

radio和checkbox的value属性决定了发送到服务端的实际内容

eg：
```
<label for="indoor">
  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
```
当用户提交表单时，如果indoor选项被选中，表单数据会包括：indoor-outdoor=indoor，也就是所选项的name和value属性值。

如果没有指明value值，则会使用默认值on，因此最好还是将value设置为一些有意义的内容比较好。
给单选框和复选框设置默认选中项

只需在"input"中添加元素checked即可。

eg：
```
<input type="radio" name="test-name" checked>
```
<div>内容划分元素

可以将某一部分划分出来，例如有一段文字，可以将第二段（<p>）和其中的"img"用<div>划分出来，利于进一步处理。
声明HTML的文档类型
1. 在最开头写上<!DOCTYPE html>，"!"和"DOCTYPE"的大写很重要，直接写"html"就意味着HTML5
2. 所有HTML代码都必须位于<html>中，其中<html>位于<!DOCTYPE html>之后
eg：
```
<!DOCTYPE html>
<html>

</html>
```

定义HTML文档的head和body

html的结构主要分为两大部分：head和body

eg：

<!DOCTYPE html>
<html>
  <head>
    <meta />
  </head>
  <body>
    <div>
    </div>
  </body>
</html>

BoboChicken

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫