HTML入门学习＜遇见狂神说＞

最新推荐文章于 2024-09-12 18:22:06 发布

CircleJoker

最新推荐文章于 2024-09-12 18:22:06 发布

阅读量155

点赞数

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

本文链接：https://blog.csdn.net/Nikick/article/details/118709221

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML入门

1、VS插件推荐

插件	说明
Chinese	中文语言包
Open in Browser	右击选择浏览器打开html文件
JS-CSS-HTML Formatter	每次保存，都会格式化代码
Auto Rename Tag	自动重命名配对的HTML/XML标签
CSS Peek	追踪至样式
escook-theme	黑马刘龙彬老师主题
Community Material Theme	设置颜色主题
Live Server	自动监测代码修改并在浏览器响应
vscode-icons	设置文件图标作主题

1.1、基本结构标签

标签名	定义	说明
< html> </ html>	HTML标签	页面中的最大的标签，我们称为根标签
< head>< head>	文档的头部	注意在head标签中我们必须要设置的标签是title
< title>< /title>	文档的标题	让页面拥有一个属于自己的网页标题
< body>< /body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

注解标签：

2、标签

2.1、标题标签

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

对应标题文字会随着不同的分级标签变粗，一个标题独占一行，一级标签是字体最大的，然后依次往下变小

2.2、段落标签

<p>段落标签</p>    //paragraph 的缩写

2.3、换行标签

换行1<br/>
换行2<br/>
换行3<br/>

2.4、水平线标签

<hr/>

2.5、文本格式化标签

语义	标签	说明
加粗	< strong> < /strong>	strong
斜体	< em>< em>	em
删除线	< del>< /del>	del
下划线	< ins>< /ins>	ins

<!--字体样式标签-->
粗体：<strong>字体加粗</strong> <br/>
斜体：<em>字体变斜体</em> <br/>
删除线： <del>删除线</del> <br/>
下划线： <ins>下划线</ins> <br/>

2.6、盒子标签

< div> 一行只能放一个
<span>一行可以放多个

<div>这是头部</div>
<span>今日价格</span> <span>次日价格</span> <span>第三天价格</span>

2.7、图像标签

<img src="图像URL"/>
<img src="../resource/image/1.jpg" alt="鸟的动画图像" title="birder图像" width="50" height="100">
//这里src的../res..路径指的是IDEA里文件夹的上一个路径的resource下的image文件夹下的1.jpg的图

src是标签的必须属性，用于指定图像的路径

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本（当图像不能显示时显示的文字）
title	文本	提示文本（当鼠标/电脑光标放到图像上显示的文字）
width	数字	图像宽度
height	数字	图像高度
…	…	…

2.8、超链接标签

<a></a>
<a href="HTML网页.html" target="_blank">点击我跳转到页面</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到页面</a>

<a href="HTML网页.html" target="_blank">
<img src="../resource/image/1.jpg" alt="鸟的图像" title="bird" width="300" height="300">
</a>

href是标签必填项，指跳转网站路径
target表示窗口在哪打开；其中常用的 ① _blank 在新标签中打开 ② _self 在本网页中打开
若 href 里面地址是一个文件或者压缩包，那么就会下载这个文件

<a href="img.zip"></a>
img.zip 在同一目录下

2.9、锚点标签

作用说明：点击链接，可以快速的定位到页面中的某个位置

找到目标位置标签，里面添加一个id属性=刚才的名字
在链接文本的href属性中，设置属性值为#名字

1.需要一个锚标记  <a name="top">TOP</a>
2.跳转到该锚标记  <a href="#top">回到顶部</a>

在这里插入图片描述

2.10、列表标签

有序列表

<!--有序列表-->  有序列表其实就是有1.  2.  3. 这种 <br/>
<ol> 这里的ol 指的就是  order list顺序列表
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>

//注：里面只能包含li，有顺序

无序列表

<!--无序列表-->
无序列表就是没有1. 2. 3. 只有红心原点 <br/>
应用范围：导航，侧边栏.. <br/>
<ul> 这里的ul 指的是 un list 无序列表
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

//注：里面只能包含li，没有顺序。li里面可以包含任何标签

自定义列表

<!--自定义列表，一般用在公司网站的地步-->
<dl>
    <dt>学科</dt>
    <dd>JAVA</dd>
    <dd>Python</dd>
    <dd>C/C++</dd>
</dl>

//注：里面只能包含dt和dd，dt和dd里面可以放任何标签

在这里插入图片描述

2.11、表格标签与属性

—表格标签

table 用来定义表格的标签
tr 用来定义表格中的行
td 用来定义表格中的列/单元格 table data 单元格的意思

—表格属性

属性名	属性值	描述
border	1或者’’ ‘’	规定表格单元是否拥有边框，默认为" "，表示没有边框
align	left,center,right	规定表格相对周围元素的对齐方式
cellpadding	像素值	规定单元边沿与其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度
colspan（非属性）	数字	表示跨列，一列占了多少格
rowspan（非属性）	数字	表示跨行，一行占了多少格
…	…	…

<table border="1" align="left" cellpadding="20" cellspacing="0" width="500">
    <tr>
        <td colspan="3" align="center">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">狂神</td>
        <td >语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">青雉</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>

在这里插入图片描述

2.12、表单标签（重点）

表单—>常用于登录、注册等；
一个完整的表单通常由表单域，表单控件(表单元素)，提示信息三部分组成

12-1、表单域 (form)

<form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器

属性	属性值	作用说明
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	指定表单域的名称，以区分同一个页面中的多个表单域

<body>
<form action="HTML网页.html" method="get" name="表单域名称">
	各表单控件，提示信息，其他标签
</form>
</body>

12-2、表单控件（表单元素） + 相关提示信息

前提：使用 input 标签：输入表单元素

属性	属性值	说明
type	text、password、radio、checkbox、submit、reset…	文本框/表单的属性
name	指定表单的名称	当前input表单的名字，后台可以通过这个name属性找到这个表单，作用于区别不同的表单
value	元素的初始值/默认值	作用于区别不同的组，一般就是结合name使用
size	数字	指定表单元素的初始宽度/长度
checked	默认为“ ”，checked (默认选中)	当type为radio/checkbox时，指定按钮是否被选中；单选框只能给其中一个加checked 属性，复选框可以多加；
maxlength	数字	当type为text/password时，规定最多输入多少个字符
placeholder	文本、数字、字符等	在文本框内隐性显示字符，起提示作用
…

具体Type属性

type 属性	说明
text	默认为 text文本框
password	密码框
radio	定义单选按钮
checkbox	定义复选框
button	普通按钮
submit	提交按钮会把表单数据发送到服务器
rest	重置按钮会清除表单中的所有数据
file	文件域，上传文件使用的
…	…

注意点：当type属性为单选框radio 或复选框 checkbox时，它们的name必须一致，value可以不一样

<body>
<form action="HTML网页.html" method="get" name="表单域名称">
    <p>账号：<input type="text" name="username" maxlength="15" placeholder="请输入用户名"></p>
    <p>密码：<input type="password" name="password" maxlength="15" required readonly></p>

    <!--单选框标签
    input type：="radio"
    value: 单选框的值
    name：表示组
    -->
    <p>性别：<input type="radio" name="sex" value="boy" id="sex1"/>男
        <input type="radio" name="sex" value="girl"/>女
    </p>

    <!--多选框标签
    input type="checkbox"
    -->
    <p>爱好：<input type="checkbox" value="sleep" name="hobby">睡觉
            <input type="checkbox" value="code" name="hobby">编程
            <input type="checkbox" value="basketball" name="hobby">篮球
            <input type="checkbox" value="water" name="hobby">水
    </p>

    <!--按钮
    input type="button"  普通按钮
    input type="image" src="路径" 图像按钮
    input type="submit" 提交按钮
    input type="reset"  清空按钮
    -->
    <p><input type="button" value="点击按钮">
        <input type="image" src="../resource/image/1.jpg" width="50">
    </p>
</form>
</body>

在这里插入图片描述

12-3、下拉框

下拉表单元素

<select name="列表名称" value="n">
    <option value="CHINA" hidden>中国</option>
    <option value="日本">日本</option>
    <option value="瑞士">瑞士</option>
    <option value="美国">美国</option>
</select>

12-4、文本域

<!--文本域   50列，10行-->
<textarea name="textarea" cols="50" rows="10">请输入</textarea>

在这里插入图片描述

12-5、文件域

用于上传文件

<!--文件域  input typt="file" -->
    <input type="file" value="提交文件" name="files">
    <input type="button" value="上传"  name="upload">
//这里 type为 file类型 显示的就是 “选择文件” 这个按钮
//当点击 “选择文件”时就会打开文件夹，然后选择文件再点击上传，基本流程就是这样

在这里插入图片描述

12-6、lable标签

lable 标签用于绑定一个表单元素
lable 标签的 for属性应当与相关元素的id 属性相同

<!--这里for可以指向 对于的id名，当点击label处的文本/符号时会指向id名那个选项-->
<label for="sex1"> 男 </lable>
<input type="radio" name="sex" id="sex" />

12-7、表单的应用

表单的应用，一般就是在对应标签最后方加一些关键字，使其生效一些功能

使文本框只读，不可填写内容：readonly
使对应属性被隐藏：hidden
禁用/置灰，不可选：disable

12-8、表单的初级验证

—针对文本框

显示提示信息：placeholder
非空判断：required
利用正则表达式：pattern

<p>密码：<input type="password" name="password" maxlength="15" required readonly></p>
<p><input type="text" pattern="^.{3,20}$"></p>

3、内联框架

< iframe> < /iframe>

<iframe src="HTML网页.html" name="hello" frameborder="0" width="1000px" height="800px"></iframe>

CircleJoker

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录