前端小入门——HTML

棕豆兔＆

已于 2024-07-24 19:08:24 修改

阅读量742

点赞数 6

文章标签：前端 html

于 2024-07-11 10:59:31 首次发布

本文链接：https://blog.csdn.net/m0_60462557/article/details/140251479

版权

一、什么是HTML？

HTML(Hyper Text Markup Language), 超文本标记语言。
超文本: 比文本要强大，通过链接和交互方式来组织和呈现信息的文本形式。不仅仅有文本, 还可能包含图片, 音频, 或者自己已经审阅过它的学者所加的评注、补充或脚注等等。
标记语言：由标签构成的语言。

二、HTML文件基本结构

<html>
 <head>
 <title>第⼀个⻚⾯</title>
 </head>
 <body>
 hello world
 </body>
</html>

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

head 标签中写页面的属性。

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

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

三、HTML常见标签

3.1 标题标签：h1~h6

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

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

3.2 段落标签：p

在HTML中, 段落, 换行符, 空格都会失效, 如果需要分成段落, 需要使用专门的标签。

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

p标签描述的段落, 前面没有缩进。
自动根据浏览器宽度来决定排版。
html 内容首尾处的换行, 空格均无效。
在 html 中文字之间输入的多个空格只相当于一个空格。
html 中直接输入换行不会真的换行, 而是相当于一个空格。

3.3 换行标签：br

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

这是⼀个br标签<br/>

3.4 图片标签：img

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

<img src="rose.jpg">

此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中。

3.5 超链接：a

href: 必须具备, 表示点击后会跳转到哪个页面。
target: 打开方式默认是 _self. 如果是 _blank 则用新的标签页打开。

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

链接的几种形式：

1. 外部链接: href 引用其他网站的地址

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

2. 内部链接：网站内部页面之间的链接，写相对路径即可

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>

3.空链接：使用#在href中占位

<a href="#">空链接</a>

3.6 表格标签

table 标签: 表示整个表格；
tr: 表示表格的一行；
td: 表示一个单元格；
thead: 表格的头部区域；
tbody: 表格的主体区域；
table 包含 tr , tr 包含 td；

<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>10</td>
 </tr>
 <tr>
 <td>李四</td>
 <td>⼥</td>
 <td>11</td>
 </tr>
</table>

3.7 表单标签

表单是让用户输入信息的重要途径，分成两个部分：
1. 表单域：包含表单元素的区域，重点是 form 标签。
2. 表单控件：输入框, 提交按钮等，重点是 input 标签。

3.7.1 form标签

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

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

3.7.2 input标签

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

<input type="text">

密码框

<input type="password">

单选框

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

注意: 单选框之间必须具备相同的 name 属性, 才能实现多选一效果

复选框

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

普通按钮

 <input type="button" value="我是个按钮">

<input type="button" value="我是个按钮" onclick="alert('hello')">

提交按钮

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

提交按钮必须放到 form 标签内,点击后就会尝试给服务器发送请求。

3.7.3 select 标签

下拉菜单，option 中定义 selected="selected" 表示默认选中。

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

3.7.4 textarea 标签

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

</textarea>

3.8无语义标签：div&span

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>