前端HTML

霸王龙骨架带走渡渡鸟

于 2022-05-21 16:19:19 发布

阅读量626

点赞数 2

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

本文链接：https://blog.csdn.net/PepDokHa/article/details/124899426

版权

JavaWeb 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本结构，包括标签的层次关系、常用标签如标题、段落、链接、表格和列表，以及无语义标签和特殊字符的处理。通过实例演示了如何快速生成代码框架，并强调了ID和class属性的使用，适合初学者入门。

摘要由CSDN通过智能技术生成

HTML结构

认识HTML标签

<body>Hello World</body>
<body id="aaa">Hello World</body>

<body>为开始标签</body>为结束标签

基本都是成对出现的，只有少数单标签

开始标签中可能会带有 "属性". id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)

同一个html中，不能有两个id相同的标签

不同的标签可能支持不同的属性（也叫元素）

HTML文本基本结构

<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        Hello World
    </body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)

head 标签中写页面的属性

body 标签中写的是页面上显示的内容

title 标签中写的是页面的标题

标签的层次结构

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)

title 是 head 的子标签. head 是 title 的父标签.

head 和 body 之间是兄弟关系.

标签之间的结构关系, 构成了一个 DOM 树

DOM 是 Document Object Mode (文档对象模型) 的缩写.

右键-检查或者 F12

快速生成代码框架

使用 !，快速生成代码框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的标题</title>
</head>
<body>
    
</body>
</html>

HTML常见标签

注释标签

<!-- 我是注释 -->

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

标题标签: h1-h6

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

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

段落标签: p

<p>这是第一段</p>
<p>这是第二段</p>
<p>这是第三段</p>

lorem可以生成随机字符串

段落和段落之间有一定的间隙，主要是为了区分段落和段落

当前的 p 标签描述的段落, 前面还没有缩进. (未来 CSS 会学)

自动根据浏览器宽度来决定排版.

html 内容首尾处的换行, 空格均无效.

在 html 中文字之间输入的多个空格只相当于一个空格.

html 中直接输入换行不会真的换行, 而是相当于一个空格.

换行标签: br

<p>这是第一段Lorem ipsum dolor sit amet consectetur adipisicing elit.<br/>
        Magnam vero natus maxime sint voluptatum incidunt tenetur</p>

br 是 break 的缩写.

表示换行.br 是一个单标签(不需要结束标签)

br 标签不像 p 标签那样带有一个很大的空隙.

<br/>是规范写法. 不建议写成<br>

格式化标签

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

加粗: strong 标签和 b 标签

倾斜: em 标签和 i 标签

删除线: del 标签和 s 标签

下划线: ins 标签和 u 标签

使用 CSS 也可以完成类似的效果. 实际开发中以 CSS 方式为主

图片标签: img

<img src="fy.jpg">

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

关于目录结构:

对于一个复杂的网站, 页面资源很多, 这种情况可以使用目录把这些文件整理好.

1. 相对路径: 以 html 所在位置为基准, 找到图片的位置.

同级路径: 直接写文件名即可 (或者 ./)

下一级路径: image/1.jpg

上一级路径: ../image/1.jpg

2. 绝对路径: 一个完整的磁盘路径, 或者网络路径.

磁盘路径 D:\rose.jpg

网络路径 https://images0.cnblogs.com/blog/130623/201407/300958470402077.png

<img src="fy.jpg" alt="我是🐏" title="这个人是🐏" 
    width="500px" height="600px" border="5px">
<img src="fyy.jpg" alt="我是🐏" title="这个人是🐏" 
    width="500px" height="600px" border="5px">

img 标签的其他属性

alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.

title: 提示文本. 鼠标放到图片上, 就会有提示.

width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.

border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

超链接标签: a

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="fy.jpg">本地图片</a>
<a href="test.html">本地网站</a>
<a href="#">不跳转</a>

href: 必须具备, 表示点击后会跳转到哪个页面.

target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

表格标签

table 标签: 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

th: 表示表头单元格. 会居中加粗

thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)

tbody: 表格得到主体区域.

table 包含 tr , tr 包含 td 或者 th

一般用css实现table属性

align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)

border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素

width / height: 设置尺寸

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

效果

列表标签

    <!--无序列表-->
<ul>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ul>
    <!--有序列表-->
<ol>
    <li>咬人猫</li>
    <li>兔总裁</li>
    <li>阿叶君</li>
</ol>
    <!--自定义列表-->
<dl>
    <dt>我的老婆们</dt>
    <dd>咬人猫</dd>
    <dd>兔总裁</dd>
    <dd>阿叶君</dd>
</dl>

无序列表[重要] ul（整个无序列表） li（列表项，一个列表中包含多个表项）

有序列表[用的不多] ol（整个有序列表） li（）

自定义列表[重要] dl (整个列表) dt (小标题) dd (标题里面的内容)

效果

表单标签

通过表单，可以让用户和服务器进行简单的交互

form

表示整个表单

表示用户输入的数据最重要提交给谁，写一个具体的url地址（服务器地址）

<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">
<br/>
<!--密码框-->
<input type="password">
<br/>
<!--单选框-->
性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女
<br/>
<!--复选框-->
爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏
<br/>
<!--普通按钮-->
<input type="button" value="我是个按钮">
<br/>
<!--提交按钮-->
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>
<br/>
<!--清空按钮-->
<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空"> 
</form>
<br/>
<!--选择文件-->
<input type="file">

效果

label

搭配 input 的单选/复选框

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

点文字也可以

select

下拉菜单

<select>
    <option>北京</option>
    <option selected="selected">西安</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>杭州</option>
</select>
<select>
    <option>--请选择年份--</option>
    <option>1991</option>
    <option>1992</option>
    <option>1993</option>
    <option>1994</option>
    <option>1995</option>
</select>

效果

textarea

文本域中的内容, 就是默认内容, 注意, 空格也会有影响.rows 和 cols 也都不会直接使用, 都是用 css 来改的.

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

效果

无语义标签

div 标签, division 的缩写, 含义是分割

span 标签, 含义是跨度

div 是独占一行的

span 不独占一行

<div>
    <span>咬人猫</span>
    <span>咬人猫</span>
    <span>咬人猫</span>
</div>
<div>
    <span>兔总裁</span>
    <span>兔总裁</span>
    <span>兔总裁</span>
</div>
<div>
    <span>阿叶君</span>
    <span>阿叶君</span>
    <span>阿叶君</span>
</div>

效果