万字带你快速入门HTML语言_keil htm文件-CSDN博客

本文链接：https://blog.csdn.net/m0_61761695/article/details/127576002

一.推荐编译器

使用vscode

二.认识HTML

HTML全称为超文本标记语言，是一种标记语言，她又一系列的标签，通过这些标记使网络上的文档格式统一，HTML命令可以说明文字，图形，动画，声音，表格，链接等等。文件格式以.html结尾，在浏览器上运行。

1.认识标签

html代码是由标签组成的
比如 <body> hello! </body>其中body是开始标签 /body是结束标签

2.HTML基本结构

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

html标签是整个html文件的根标签
head标签中写入页面的属性
title标签写入页面的标题
body标签中写入页面中显示的内容
快速生成代码框架可以**！＋Tab**
点击html文件的位置打开浏览器后，浏览器界面右键后选检查或者F12，可以进入调试.
效果如下：(记得在vscode中 ctrl+s保存后在浏览器中才可以看到新的内容)
在这里插入图片描述

3.标签的层次结构

标签存在层次结构，比如
在这里插入图片描述
html是head和body的父标签，head和body是html子标签，
同时head和body是兄弟标签。

三.HTML常用标签

1.注释标签

ctrl+/ 快速注释或取消注释

<!-- 这是一个注释 -->

2.标题标签 h1-h6

一共六个从h1~h6 数字越小标题字体越大

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

在这里插入图片描述

3.段落标签 p

p标签可以实现文章分段，并且每段之间有一点空隙。

<p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
        HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</p>
    <p>超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，
        也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，
        为人们查找，检索信息提供方便。 </p>

在这里插入图片描述

4.换行标签 br

br标签是一个单标签直接用结束，他不像段落标签p，换行后会有两段之间会有空隙。

<p>HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
        HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。</br>
    超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，
        也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，
        为人们查找，检索信息提供方便。 </p>

在这里插入图片描述

5.格式化标签 strong,b,em,i,del,s,ins,u

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

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

在这里插入图片描述

6.超链接标签 a

 <a href="http://www.sogou.com">搜狗</a>

在这里插入图片描述

7.图片标签 img

src属性是图片路径可以写绝对路径(从根盘开始寻找)或相对路径(./)。
alt属性是如果图片不能显示时，用这里的文字代替。
title属性是提示文本鼠标放在上面会显示文字。
width和height是设置宽度和高度。

注意：src属性必须有，别的属性可以没有。

<img src="./apic2098.jpg" alt="雪花"
 title="这是雪花" width="400px" height="500px">

在这里插入图片描述

也可以使用网络路径

<img src="https://www.keaidian.com/uploads/allimg/190424/24110307_4.jpg" 
    alt="马尔代夫" width="600px" height="800px">

在这里插入图片描述

四.表格标签 table

table标签：整个表格
tr标签：表格中的一行
td标签：表格中的一个单元格也可以理解成一列
td标签：会加重多用于第一行的表头

<table>
        <tr>
            <th>性别</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>10</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>20</td>
        </tr>
    </table>

在这里插入图片描述

五.列表标签 ul ol

h3：前面说的标题标签
ul：无序列表
ol：有序列表
dl：自定义列表

<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>

在这里插入图片描述

六.表单标签

1.input标签

1.input标签是单标签
2.input标签里有很多输入的输入框，还有选择男女或者地区的选择框，还有按钮。
3.type属性：必须有，用来选择input种类。
4.name属性:是对这个input标签起名字，名字是独一无二的，所以对于复选框和单选框中的单选框就是通过相同名字不能同时选择而实现了单选框。
5.value属性：input中的默认值，也就是默认的输入

①.文本框(“text”)

可以进行输入。

<input type="text">

在这里插入图片描述

②.密码框(“password”)

进行密码输入，对密码的显示为**** 也可以选择显式显示密码。

<input type="password">

在这里插入图片描述

③.复选框(“checkbox”)

选项可以多选

<input type="checkbox">上课
   <input type="checkbox">睡觉
   <input type="checkbox">吃饭
   <input type="checkbox">玩游戏

在这里插入图片描述

④.单选框(“radio”)

选项只能单选

<input type="radio">男
<input type="radio">女

在这里插入图片描述

不过我们发现单选框的radio，仍然可以多选，这是我们就要加入一个name属性来标识这个input，对于单选框，具有相同的name，才能实现。

<input type="radio" name="gender">男
   <input type="radio" name="gender">女

在这里插入图片描述

⑤.普通按钮(“button”)

1.展现一个按钮，可以点击，有响应无内容

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

效果如下：
在这里插入图片描述

2.展现一个按钮，可以点击，有响应有内容(实现点击按钮后的效果)

<input type="button" value="这是一个按钮" 
onclick="alert('hello,html')">

效果如下：
在这里插入图片描述

2.label标签

与input标签搭配使用

在input标签中的，单选框和复选框中，如果真的写了以后再浏览器尝试，会发现它只能点击那个⚪的地方，但是我们在平常使用这种选择框的时候，点击文字也可以实现选中，所以这就需要用到label标签来搭配input标签使用。

<input type="checkbox" id="eat">
<label for="eat">吃饭</label>
<input type="checkbox" id="sleep">
<label for="sleep">睡觉</label>

3.select标签

1.select标签：实现下拉菜单
2.option属性：选项
3.selected属性：默认选项

<select>
        <option>===请选择地区===</option>
        <option selected="selected">西安</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
   </select>

在这里插入图片描述

4.textarea标签

1.textarea标签：显示一个文字域的样式，在里面输入文字。
2.rows属性：限制行
3.cols属性：限制列

 <textarea rows="5" cols="60">
   </textarea>

在这里插入图片描述

七.div和span标签

1.div标签是独占一行的
2.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>

在这里插入图片描述

八.实现一个 “个人信息展示”

实现一个简单的个人简历
效果展示👇👇👇
在这里插入图片描述

==========================================================================
代码实现👇👇👇

<h1>西安彭于晏</h1>
    
    <div>
        <h2>个人信息</h2>
        <img src="https://p6.itc.cn/q_70/images03/20221019/32e46f7caefe4e1ba1ba85d0f3e0de07.jpeg" alt="彭于晏" width="200px" height="200px">
        <P>年龄: 22岁</P>
        <p>性别: 男</p>
        <p>工作意向: 工程师</p>
        <p>电话: 177789745XX</p>
        <p>邮箱: 23916411XX@qq.com</p>
        <p><a href="https://blog.csdn.net/m0_61761695?spm=1000.2115.3001.5343">我的 博客</a></p>
        <p><a href="https://gitee.com/zyz2391641173/zyz">我的 gitee</a></p>
    </div>

    <div>
        <h2>教育背景</h2>
        <ul>
            <li>本科毕业于XXX大学</li>
            <li>研究生毕业于XXX大学</li>
        </ul>
    </div>

    <div>
        <h2>专业技能</h2>
        <ol>
            <li>熟练使用java语言,了解javascript,c,python,html,css,Rust语言</li>
            <li>能用熟练使用mysql数据库进行CRUD</li>
            <li>能够实现常见的数据结构并应用</li>
            <li>熟练掌握计算机网络理论,操作系统,能够实现简单的网络编程</li>
            <li>掌握Web开发能力,能够独立开发后端前端建立网站</li>
        </ol>
    </div>

    <div>
        <h2>自我评价</h2>
        <p>有上进心，愿意学习新技术，学习能力强，基础扎实</p>
    </div>