(一)基础HTML

简介: (一)基础HTML

前言


观前提醒:擅用 Ctrl+F,笔记不求详细,但求理解,部分难以理解的内容我给了实例或者文档的链接,还有一些我推荐的小游戏可以加深对前端一些属性的理解,希望能点个小小的赞💕


HTML 是一种标记语言,使用特殊的语法或标记来向浏览器描述网页的结构。

HTML 元素由开始和结束标签构成,标签之间是文本内容。

不同的标签可以让文本内容以标题、段落、列表等形式展现。


image.png




DOCTYPE


<!DOCTYPE html>
<html>
    <head>
        <!-- 网页描述 -->
    </head>
    <body>
        <!-- 网页内容(向用户展示),以下内容全部写在body中 -->
    </body>
</html>
复制代码


h1~h6 p img br comment


<h1>Hello</h1>
<h2>CatPhotoApp</h2>
<p>I'm a p tag!</p>
<img src="https://www.bit.ly/fcc-relaxing-cat" alt="a cat">
<br>
<!-- 注释 -->
<!-- main, header, footer, nav, video, article and others -->
<main> 
  <h1>Hello World</h1>
  <p>Hello Paragraph</p>
</main>
复制代码


a


<!-- 页面间的跳转 -->
<a href="https://www.freecatphotoapp.com">cat photos</a>
<!-- 页面内的跳转 -->
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
<!-- #作为占位符,图片作为链接 -->
<p>Click here to view more
    <a href="#">
        <img src="https://www.bit.ly/fcc-relaxing-cat" 
         alt="A cute orange cat.">
        cat photos
    </a>
    .
</p>
复制代码


list


<!-- 无序及有序列表 -->
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>
复制代码


input


input 为输入文本框,有不同的 type 属性,placeholder 作为占位符在未输入时显示内容。


<input type="text">
<input type="text" placeholder="cat photo URL">
复制代码


form button


form 为发送数据给服务器的表单。

required 表明必须填写后才能提交。


<form action="https://www.freecatphotoapp.com/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
    <button type="submit">submit</button>
</form>
复制代码


label radio checkbox div value


按钮用 label 包裹,需用 for 指明按钮 id

radio 代表单选,checked 代表默认选中


<label for="indoor">
    <input type="radio" id="indoor" 
     name="indoor-outdoor" checked> Indoor
</label>
<label for="outdoor">
    <input type="radio" id="outdoor" 
     name="indoor-outdoor"> Outdoor
</label>
复制代码


checkbox 为多选框

div 为内容划分元素,是一个包裹其他元素的通用容器。


<div>
    <label for="1">
        <input type="checkbox" name="personality" id="1"> 1
    </label>
    <label for="2">
        <input type="checkbox" name="personality" id="2"> 2
    </label> 
    <label for="3">
        <input type="checkbox" name="personality" id="3"> 3
    </label>
</div>
复制代码


按钮被选中时,会在表单内提交 indoor-outdoor=indoor , 即 value 的数据


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


目录
相关文章
|
前端开发
前端基础 - HTML框架集之FrameSet
前端基础 - HTML框架集之FrameSet
76 0
|
前端开发
前端基础 - HTML常用标签
前端基础 - HTML常用标签
42 0
|
2月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
34 1
前端基础(十七)_HTML5新特性
|
27天前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
16 2
|
27天前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
25 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
89 1
|
3月前
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
37 9
|
3月前
|
移动开发 前端开发 搜索推荐
前端基础101之HTML总结
【8月更文挑战第1天】
22 4
|
5月前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
32 0
前端基础学习(一)HTML入门