HTML基础入门（详细）

最新推荐文章于 2024-04-24 09:27:42 发布

小嘭you

最新推荐文章于 2024-04-24 09:27:42 发布

阅读量2k

点赞数 4

分类专栏：前端文章标签： html 前端服务器

本文链接：https://blog.csdn.net/weixin_51143430/article/details/124257783

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、HTML结构

HTML语言是超文本标记语言。
HTML（Hyper Text Markup Language)是一种用于创建网页的标准标记语言。

html是由标签构成的。
标签名要放入<>中。
大部分标签成对出现，少数标签单独出现，称为“单标签”。

<body> 内容 </body>

1.1 HTML基本结构

<html>
<head>
    <title>FOOD</title>
</head>
<body>
    hello html !!!
</body>
</html>

在这里插入图片描述

DOM树

标签之间的文件关系构成了DOM树。
DOM（Document Object Mode)文档对象模型
防止乱码问题：

<!--<meta cgarset="UTF-8"> -->

2. HTML常见标签

2.1 注释标签:!

<!--注释>

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

2.2 标题标签:h1-h6

<h1>你好<h1>
<h2>你好<h2>
<h3>你好<h3>
<h4>你好<h4>
<h5>你好<h5>
<h6>你好<h6>

在这里插入图片描述
从h1到h6,数字越大字体越小。

2.3 段落标签:p

<p>段落内容</p>

<html>
<head>
    <title>FOOD</title>
</head>
<body>
     <p>美食，顾名思义就是美味的食物，贵的有山珍海味，便宜的有街边小吃。其实美食是不分贵贱的，只要是自己喜欢的，都可以称之为美食。</p>中国素有”烹饪王国“这个美誉。在中国这个大家庭里，我们有五十六个小家庭，每个家庭都有自己的特色美食。美食吃前有期待、吃后有回味，已不仅仅是简单的味觉感受，更是一种精神享受。享受美食也要看场合，场合好美食吃起来才有味道。<p>世界各地美食文化博大精深，营养物质各不相同，品味更多美食，享受更多健康，也让人吃的更加开心。 </p><p>美食不仅仅是餐桌上的食物。还包括休闲零食、各种饼干、糕点、糖类，蜜饯、干果、肉制食品、茶饮冲泡等制品，各有各的风味，都可称之为美食。</p>
</body>
</html>

在这里插入图片描述

2.4 文字格式化

2.4.1 加粗/strong

b标签和strong标签

2.4.2 倾斜:i/em

i标签和em标签

2.4.3 下划线:u/ins

u标签和ins标签

<u>下划线</u>

2.4.4 删除线:s/del

s标签和del标签
在这里插入图片描述

美食， 顾名思义就是美味的食物， 贵的有山珍海味，便宜的有街边小吃。其实美食是不分贵贱的。

2.5 换行标签:br

单标签、规范写法：<br/>

2.6 图片标签:img

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

 <img  src="food.jpg" alt="美食" title="这是火锅" width="300" height="300">

img标签的其他属性：
alt ：替换文本
title：提示文本，鼠标放到图片上显示的文字。
width：宽度
height：高度
border：边框
要把图片文件与HTML在同级目录中。
在这里插入图片描述
**相对路径：**以html所在位置为基准，找到图片的为位置。

同级路径：直接写文件名 ./
下级路径：image/1.jpg
上级路径：…/image/1.jpg

绝对路径：完整的磁盘路径或网络路径。
磁盘路径：D:\food.jpg
网络路径：https://image…

2.7 超链接:a

<a网址>链接</a>

外部链接href: 必须有链接地址，即跳转后的页面地址，当前页面打开链接。

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

内部链接target: 打开方式，在一个新的页面打开链接地址。

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

空链接：使用#在herf中占位。

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

下载链接: href对应的路径是一个文件。

< a href="text.zip">下载文件</a>

网页元素链接：可给图片等任何元素添加链接。

<a href ="http://baidu.com"> 
<img src="food.jpg" alt="">
 </a>

锚点链接: 可以快速定位到页面中的某个位置。

<a href = "1">第一章</a>
<a href = "2">第二章</a>
<a href = "3">第三章</a>

<p id="1">
    第一章内容<br>
</p>
<p id="2">
    第二章内容<br>
</p>
<p id="3">
    第三章内容<br>
</p>

在这里插入图片描述

2.8 表格标签

整个表格: table
行：tr
列：td
表头单元格：th,会居中加粗
表格头部区域：thead
表格主体区域：tbody
table包含tr,tr包含th或td。

  <p>
      <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="200">
      <tr>
          <td>班级</td>
          <td>姓名</td>
          <td>学号</td>
      </tr>
      <tr>
        <td>软件1</td>
        <td>小王</td>
        <td>1111111</td>
    </tr>
    <tr>
        <td>软件2</td>
        <td>小张</td>
        <td>2222222</td>
    </tr>
    <tr>
        <td>软件3</td>
        <td>小李</td>
        <td>3333333</td>
    </tr>
</table>
  </p>

在这里插入图片描述
合并单元格：
跨行合并：rowspan=“n”
跨列合并：colspan=“n”

2.9 列表标签

无序列表: ul li

   <h2>课程</h2>
    <ul>
        <li>数据结构</li>
        <li>算法</li>
        <li>计算机网络</li>
        <li>操作系统</li>
        <li>软件测试</li>
    </ul>

在这里插入图片描述

有序列表: ol li

 <h2>教育背景</h2>
    <ol>
        <li>幼儿园：        小天才幼儿园</li>
        <li>小学：          小天才小学</li>
        <li>初中：          小天才初级中学</li>
        <li>高中：          小天才高级中学</li>
        <li>大学：          小天才大学</li>
    </ol>

在这里插入图片描述
自定义列表：dl(总标签）dt(小标签）dd（围绕标题来说明）上面有小标题，下面有几个围绕标题展开的。

 <h2>学院</h2>
        <dl>
            <dt>专业</dt>
            <dd>网络工程</dd>
            <dd>软件工程</dd>
            <dd>计算机科学与技术</dd>
            <dd>电子商务</dd>
        </dl>

在这里插入图片描述

2.10 表单标签

表单是让用户输入信息的重要途径。
表单域：包含表单元素的区域，重点是from标签。
表单控件：输入框，提交按钮等，重点是input标签。

2.10.1 form标签：

<form action="demo1.html">
内容
<form>

2.10.2 input标签：

各种输入控件，单行文本框，按钮，单选框，复选框。
type: button,checkbox,text,file,image,password,radio等多种类型。
name:
value:当前标签的的默认值。
checked：默认被选中。（单选按钮和多选按钮）
maxlength:设定最大长度。（使用场景文本框，
1.文本框：<input type = "text">
input标签
&nbsp ：空格
2.密码框：<input type = "password">

   <form>
        用户名：<input type = "text"><br>
        密&nbsp&nbsp&nbsp码:&nbsp&nbsp&nbsp<input type = "password"><br>
    </form>

空格特殊标签：&nbsp
在这里插入图片描述
3.单选框<input type="radio" >

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

在这里插入图片描述
4.复选框 <input type="checkbox">

爱好：<input type =""checkbox"> 吃饭<input type ="checkbox">睡觉<input type ="checkbox">打豆豆`

在这里插入图片描述

2.10.2 button标签：

普通按钮：

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

提交按钮：

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

清空按钮：

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

在这里插入图片描述

选择文件：

<input type="file">

在这里插入图片描述

lable标签：
增强用户体验，是点击按钮旁的文字时能达到和点击按钮有相同的效果。

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

在这里插入图片描述

2.10.3 select标签：

下拉框标签：

<tr>
    <td>课程:</td>
      <td>
        <select>
            <option>数据结构</option>
            <option>算法</option>
            <option >操作系统</option>
            <option selected="selected">软件工程</option>
        </select>
     </td>
</tr>

在这里插入图片描述

2.10.4 textarea标签：

显示多行文本：

<tr>
    <td> 
        <textarea rows="5" cals="200">
        </textarea>
    </td>
  </tr>

在这里插入图片描述

2.10.5无语义标签：div&span

div作用：天然换行，但只占一行。
span作用：单独对某些内容进行设置，不独占一行。

补充：
特殊字符：&nbsp
小于号：&lt
大于号：&gt
按位与：&amp

小嘭you

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
HTML基础入门（详细）

HTMLHTML结构2.HTML常见标签2.1注释标签2.2换行符2.3加粗标签2.4文字格式化2.4.1加粗2.4.2倾斜 2.4.3下划线HTML结构2.HTML常见标签2.1注释标签<!--注释>ctrl快捷键可快速进行注释或取消注释2.2换行符2.3加粗标签2.4文字格式化2.4.1加粗2.4.2倾斜 2.4.3下划线......
复制链接

扫一扫