初识html

最新推荐文章于 2023-03-05 08:50:21 发布

多吃维C~

最新推荐文章于 2023-03-05 08:50:21 发布

阅读量671

点赞数 1

分类专栏： java学习分享文章标签： html 前端开发语言面试

本文链接：https://blog.csdn.net/zyyy0/article/details/127592204

版权

java学习分享专栏收录该内容

42 篇文章 0 订阅

订阅专栏

HTML的结构

HTML是由一些标签构成了，每个标签都有开始标签与结束标签~~也有部分标签，只有开始标签(单标签)~~标签之间可以嵌套~~

HTML的标签(tag)，也可以称为元素(element)~~

vscode中，直接输入!，按 enter 键，此时能自动生成代码的主体框架。

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

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

head 标签中写页面的属性

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

代码框架

<!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>
 	hello world
</body>
</html>

<!DOCTYPE html>描述当前的文件是一个 HTML5 的文件

<html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面"

HTML常见标签

注释标签： 注意：ctrl + / 快捷键可以快速进行注释/取消注释。

标题标签: h1-h6：数字越小，标题越大越粗；数字越大，标题越小越细~~

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签：<p>这是一个段落</p>

换行标签：它是一个单标签<br/>

格式化标签：

加粗: strong 标签和 b 标签

倾斜: em 标签和 i 标签

删除线: del 标签和 s 标签

下划线: ins 标签和 u 标签

<strong>加粗</strong>
<b>加粗</b>

<em>倾斜</em>
<i>倾斜</i>

<del>删除线</del>
<s>删除线</s>

<ins>下划线</ins>
<u>下划线</u>

图片标签：它是一个单标签(img标签)

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

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

写法：<img src="图片路径" alt="文字">

超链接标签：

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

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

表格标签：

table 标签: 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

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

<table border="1">
  <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>

列表标签：

无序列表：ul标签

有序列表：ol标签

列表项：li标签

<h3>无序列表</h3>
<ul>
  <li>咬人猫</li>
  <li>兔总裁</li>
  <li>阿叶君</li>
</ul>
<h3>有序列表</h3>
<ol>
  <li>咬人猫</li>
  <li>兔总裁</li>
  <li>阿叶君</li>
</ol>

表单标签：表单标签是为了和用户交互的~~

form标签：进行前后端交互，功能是构造一个HTTP请求~~

input标签：有很多形态，这些形态表示了不同的元素效果

1) 文本框
<input type="text">

2) 密码框
<input type="password">

3) 单选框
<input type="radio" name="sex">男
<input type="radio" name="sex">女

4) 复选框
<input type="checkbox"> 吃饭 
<input type="checkbox"> 睡觉 
<input type="checkbox">打游戏

5) 普通按钮
<input type="button" value="我是个按钮">

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

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

8) 选择文件
<input type="file">

label 标签：

搭配 input 使用，点击 label 也能选中对应的单选/复选框，能够提升用户体验。

for 属性：指定当前 label 和哪个相同 id 的 input 标签对应 (此时点击才是有用的)

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

select 标签：下拉菜单，里面的每个选项是一个option标签

<select>
  <option>北京</option>
  <option>上海</option>
</select>

textarea 标签：多行文本框

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

无语义标签：div & 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>

多吃维C~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识html

HTML是由一些标签构成了，每个标签都有开始标签与结束标签~~也有部分标签，只有开始标签(单标签)~~标签之间可以嵌套~~for 属性：指定当前 label 和哪个相同 id 的 input 标签对应 (此时点击才是有用的)select 标签：下拉菜单，里面的每个选项是一个option标签。HTML的标签(tag)，也可以称为元素(element)~~html 标签是整个 html 文件的根标签(最顶层标签)input标签：有很多形态，这些形态表示了不同的元素效果。表单标签：表单标签是为了和用户交互的~~
复制链接

扫一扫