HTML基础

最新推荐文章于 2025-05-31 10:10:35 发布

Cws732

最新推荐文章于 2025-05-31 10:10:35 发布

阅读量672

点赞数

分类专栏：笔记文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/weixin_45980299/article/details/125092589

版权

笔记专栏收录该内容

33 篇文章

订阅专栏

HTML 结构

HTML 文件基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)    
head 标签中写页面的属性. 
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.

标签层次结构

父子关系

兄弟关系

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
       hello world
    </body>
</html>

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)     
title 是 head 的子标签. head 是 title 的父标签.     
head 和 body 之间是兄弟关系.

快速生成代码框架

在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTML 常见标签

注释标签

<!-- 我是注释 -->

ctrl + / 快捷键可以快速进行注释/取消注释.

标题标签: h1-h6

有六个, 从 h1 - h6. 数字越大, 则字体越小

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

段落标签: p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落.

<p>这是一个段落</p>

换行标签: br

br 是 break 的缩写. 表示换行.
br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙. 
<br/> 是规范写法. 不建议写成 <br>

格式化标签

加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签

<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

图片标签: img

img 标签必须带有 src 属性. 表示图片的路径.

<img src="rose.jpg">

超链接标签: a

<a href="http://www.baidu.com">百度</a>

表格标签

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
height="500">
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>20</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>21</td>
    </tr>
</table>

align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)
border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框. 
cellpadding: 内容距离边框的距离, 默认 1 像素
cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺寸.

列表标签

主要使用来布局的. 整齐好看. 
无序列表[重要] ul li , . 
有序列表[用的不多] ol li
自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开的.

<h3>无序列表</h3>
<ul>
    <li>力扣</li>
    <li>牛客</li>
    <li>优快云</li>
</ul>
<h3>有序列表</h3>
<ol>
    <li>力扣</li>
    <li>牛客</li>
    <li>优快云</li>
</ol>
<h3>自定义列表</h3>
<dl>
    <dt>常用软件</dt>
    <dd>牛客</dd>
    <dd>力扣</dd>
    <dd>优快云</dd>
</dl>

表单标签

分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签. 
表单控件: 输入框, 提交按钮等. 重点是 input 标签.

form 标签

描述了要把数据按照什么方式, 提交到哪个页面中.

<form action="test.html">
   ... [form 的内容]
</form>

input 标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框. 
type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等. 
name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一. 
value: input 中的默认值. 
checked: 默认被选中. (用于单选按钮和多选按钮)
maxlength: 设定最大长度.

文本框

<input type="text">

密码框

<input type="password">

单选框

性别: 
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

复选框

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏

普通按钮

<input type="button" value=""按钮>

提交按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

清空按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

选择文件

<input type="file">

点击选择文件, 会弹出对话框, 选择文件.

label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.
for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应。

<label for="male">男</label> <input id="male" type="radio" name="sex">

select 标签

option 中定义 selected="selected" 表示默认选中

<select>
    <option>北京</option>
    <option selected="selected">上海</option>
</select>

textarea 标签

<textarea rows="3" cols="50">
    
</textarea>

rows 和 cols 都不会直接使用, 是用 css 来改的.

无语义标签: div & span

div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒子. 用于网页布局
div 是独占一行的, 是一个大盒子. 
span 不独占一行, 是一个小盒子.

<div>
    <span>力扣</span>

</div>
<div>
    <span>牛客</span>

</div>
<div>
    <span>优快云</span>

</div>

HTML 特殊字符

有些特殊的字符在 html 文件中是不能直接表示的, 例如:
空格: &nbsp;
小于号: &lt;
大于号: &gt;
按位与: &amp;
html 标签就是用 < > 表示的. 因此内容里如果存在 < > , 就会发生混淆.

小结

HTML 只是描述了页面的骨架结构.
使用 CSS 可以针对页面进行进一步美化.