HTML基础

最新推荐文章于 2024-11-08 23:07:45 发布
原创 最新推荐文章于 2024-11-08 23:07:45 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

这篇博客介绍了HTML的基础，包括BS结构、基本标签、实体符号、表格、单元格合并、表头标签、背景设置、图像标签、超链接、表单设计，如用户注册表单、下拉列表和各种表单控件的使用，如hidden、readonly和disable属性，以及HTML元素的属性，强调了id属性在JavaScript交互中的重要性。

HTML基础

BS结构介绍

在这里插入图片描述

HTML的基本标签

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>les twins</h4> 
<hr color="red" width="100%">
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2</sup>
10<sub>2</sub>
<font color="red" size="50">字体标签</font>
</body>
</html>

HTML的实体符号

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实体符号</title>
</head>
<body>
    <!--实体符号特点是：以&开始，以；结束-->
    b&lt;a&gt;c
    <br>
    a&nbsp;bc
</body>
</html>

HTML的表格

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
    <br><br><br><br><br><br><br><br><br><br>
    <center><h3 >员工信息列表</h3></center>
    <hr width=100%>
    <!-- border 设置表格边框的宽度 -->
    <table align="center" border="1px" width=60% height=150px>
        <tr align="center">
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>e</td>
            <td>f</td>
            <td>g</td>
        </tr>
        <tr>
            <td>h</td>
            <td>i</td>
            <td align="center">j</td>
        </tr>
    </table>
</body>
</html>

单元格的合并

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格单元格合并</title>
</head>
<body>
    <!-- 注意事项：
            1、row合并的时候，删除“下面的”单元格
            2、colspan合并的时候，删谁都行
         -->
   <table border="1px" width=50%>
       <tr>
           <th>员工编号</th>
           <th>员工薪资</th>
           <th>部门名称</th>
       </tr>
       <tr>
           <td colspan="2">1</td>
           
           <td>3</td>
       </tr>
        <tr>
         <td>4</td>
         <td>5</td>
         <td rowspan="2">9</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            
        </tr>
   </table>
</body>
</html>

thead tbody tfoot标签

将表在名义上分成三部分

背景色和背景图片

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景颜色和背景图片</title>
</head>
<body bgcolor="red" background="D:\学习\微信图片_20220117020436.jpg">
    
</body>
</html>

img标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片img</title>
</head>
<body >
    <!-- 
        1、title设置鼠标悬停时显示的信息
        2、alt设置图片加载失败时显示的提示信息
     -->
    <img src="D:\学习\微信图片_20220117020436.jpg" width="50%" title="我是laurent" alt="图片找不到喔"/>
    <br><br><br>
    <img src="D:\学习\微信图片_20220117020424.jpg" width="50%" title="我是larry" alt="图片找不到喔"/>
</body>
</html>

超链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body >
    <!-- target="_blank"来一个新窗口 
         _self  当前窗口
         _top   顶级窗口
         _parent 父窗口
       
    -->
   <a href="https://www.baidu.com/" target="_blank">
       <img src="img/百度.png" />
   </a>
</body>
</html>

表单

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body >
   <form action="http://localhost:8080/jd/login">
        用户名<input type="text"/><br>
        密码<input type="password"/><br>
        <input type="submit" value="登录"/>
   </form>

   <!-- 
       表单是以什么格式提交数据给服务器的？
        http://localhost:8080/jd/login?username=abc&password=123
        格式：action?name=value&name=value&name=value……

        重点强调：表单填写了name属性的，一律会提交给服务器，不想提交这一项，就不要写name属性

        文本框和密码框的value不需要程序员，用户输入什么value就是什么

        当name没有写的时候，该项就不会提交给服务器
        但当value没有写的时候，value的默认值是空字符串"",会将字符串提交给服务器，java代码得到的是：String username = "";
    -->
<form action="http://localhost:8080/jd/login">
    
   <table border="1px">
       <tr>
           <td>用户名</td>
           <td><input type="text" name="username"/></td>
       </tr>
       <tr>
           <td>密码</td>
           <td><input type="password" name="password"/></td>
       </tr>
       <tr align="center">
           <td colspan="2"><input type="submit" value="登录"/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" value="清空"/>
        </td>
           
       </tr>
   </table>
</form>
</body>
</html>

用户注册的表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册的表单</title>
</head>
<body >
<!-- 
    用户名
    密码
    确认密码
    性别
    兴趣
    学历
    简介
    from表单属性method:
    get:用户提交的信息显示在浏览器上
    post:不会，更安全
    超链接也可以提交数据给服务器，但是死的，而且它用的是get
 -->

    <form action="url">
        用户名<input type="text" name="username"><br>
        密码<input type="password" name="password"><br>
        确认密码<input type="text" ><br>
        性别:<br><input type="radio" name="sex" value="1" checked>男<br>
        <input type="radio" name="sex" value="0">女<br>
        兴趣:<br><input type="checkbox" name="hobby" value="抽烟">抽烟<br>
        <input type="checkbox" name="hobby" value="烫头">烫头<br>
        <input type="checkbox" name="hobby" value="跳舞">跳舞<br>
        学历:<br>
        <select name="xueli">
            <option  value="dz">大专</option>
            <option  value="bk" selected>本科</option>
            <option  value="ss">硕士</option>
        </select>
       
        简历：<textarea name="introduce" rows="6" cols="10"></textarea>
        <input type="submit" value="注册">
        <input type="reset" value="清空">
    </form>
</body>
</html>

下拉列表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉表支持多选</title>
</head>
<body >
    <!-- multiple支持多选  size设置显示的条目数量-->
    <select multiple="multiple" size="2">
        <option>河北省</option>
        <option>河南省</option>
        <option>山东省</option>
        <option>山西省</option>
    </select>
</body>
</html>

file控件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>file控件</title>
</head>
<body >
<!-- file控件，文件上传专用 -->
<input type="file"/>
</body>
</html>

hidden控件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hidden控件</title>
</head>
<body >
<form action="url">
    <!-- 隐藏域 网页上看不到，但提交的的时候会给服务器 -->
    <input type="hidden" name="userid" value="111"/>
    用户代码<input type="text" name="userode" />
    <input type="submit" value="提交"/>
</form>
</body>
</html>

readonly disable

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>readonly disable</title>
</head>
<body >
<form action="url">
 
    用户代码<input type="text" name="usercode" value="132" readonly/>
    用户名<input type="text" name="username" value="zz" disabled/>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

readonly 可以提交数据给服务器，disable不会

maxlength

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>maxlength</title>
</head>
<body >
<input type="text" maxlength="3">
</body>
</html>

html中元素的属性

1、在html文档当中，任何元素（节点）都有id属性，id属性是该节点的唯一样式，故id值不能重复

2、表单提交数据时，只跟name有关系，跟id没关系

3、id有什么用？

​ j s可以对html文档中的任意节点进行增删改查

​ 通常通过id来拿到节点对象，让我们获取元素更方便
可以提交数据给服务器，disable不会

kumouya
关注
HTML入门02
weixin_41468241的博客
01-19 3951
a>2、双标签：h1-h6、div、文本颜色、p段落、a、ul li。5、锚点？如：div、ol、ul、li、dl、dt、dd、h1-h6。4、
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 3056
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
【学习笔记】HTML5 示例
码海畅游记录
07-18 1万+
示例1 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet
HTML入门学习
qq_46556545的博客
03-23 4181
基本标签 文档声明 <!DOCTYPE html> <!--文档声明，表示这是一个HTML页面--> HTML标签 <html> </html> <!--标签对，告诉浏览器这个页面的范围--> head标签 <head> </head> <!--标签对，是网页的头部，用于定义一些特殊的内容--> body标签 标题标签 段落标签 换行标签 水平线标签 字体样式标签 常见特殊符号
HTML基础语法
weixin_46931860的博客
10-30 3632
HTML语义化 一、基本标签 1、HTML结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>这是网页的标题</title> </head> <body> <p>这是网页的内容</p> </body> </html> 2、head标签 title meta l
HTML基础--CSS3（三）
m0_50315078的博客
08-11 763
HTML基础之CSS3（三）
HTML基础知识入门大全
HTDiiii的博客
08-20 3694
HTML 什么是 HTML HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。 HTML 标签/元素 HTML 属性 第一个 HTML <!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
HTML基础练习题
weixin_50108821的博客
09-23 1万+
第一题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>嘿嘿嘿</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr align="center">
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 5094
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
html基础知识选择题,HTML笔试题目(附答案)HTML基础知识笔试题目(附答案).pdf
weixin_39877805的博客
06-04 2675
1、{HTML 题目 } 在 HTML页面中制作一个图像，想要在鼠标指向这个图像时浮出一条提示信息，应该使用的参数是 :( C ) ( 选择 1 项 )A) POP B) SRC C) ALT D) MSG2、{HTML题目 } 在页面中看不见的表单元素是那种？ ( C ) (选择 1 项)A) B )C) D )3、(HT...
＜!DOCTYPE html＞＜html＞＜head＞ ＜meta charset=“utf-8“ /＞ ＜meta name=“viewport“ conten
热门推荐
weixin_55229531的博客
03-01 6万+
web---HTML基础知识
Allure泽宇的博客
06-11 6047
HTML基础知识内容总结
html使用
悲欢离合
04-25 985
1.html说明 1.1<!--注解 --> 注释:解释说明，对代码的说明；注释浏览器不解析 2html:超文本标签语言 浏览器解析； 弱语言：偶尔写错浏览也能解析；程序员编写的时候尽量规范； 3标签的作用：让html页面语义化 4标准的html格式 文档声明：<!doctype html> html标签：包括所有内容 head标签：文档头，包括一些关于页...
精读HTML文件——head篇
最新发布
2401_87603544的博客
11-08 4296
首先，<meta>标签是卸载html文件的<head>标签下的，它的内容不会在页面上显示，不过会被浏览器的渲染器识别并执行，这段代码viewport就是一个视图接口，即网站展现在用户面前的样子,width=device-width,就是网页的宽度随着设备的宽度改变而改变，initial-scale=1,是为了优化网页的视觉效果，确保网页在加载的过程中，不会被缩放。3、<meta charset="UTF-8" />这段代码很明显，就是定义编码格式，html代码用UTF-8的形式呈现在网页上。
前端入门HTML篇
qq_44354408的博客
08-04 1080
HTML是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。html是制作网页的基础，我们在网络营销中讲的静态网页，就是以html为基础制作的网页。 标签是什么？ HTML标签 是由一对尖括号包裹的单词构成 例如: 所有标签中的单词不可能以数字开头；标签不区分大小写 和 推荐使用小写；标签分为两部分: 开始标签 和 结束标签 ， 两个标签之间的部分，......
前端基础-01-HTML
gemoumou的python学习实记
05-19 1200
一个完整的网页是由 >html:完成页面各组成部分的搭建;css：进行页面修饰；js：让html页面具有很多的功能 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>我是标题</title>.
html基础
qq_50452445的博客
07-06 4581
HTML 的全称为超文本标记语言, 是一种标记语言。主要用来为文本添加语义。 注释 基本标签 h p img src: “图片的 URL”alt: “图像显示出错的替代文本”width: “图像宽度”height: “图像高度”注意点:​ 1.默认显示图像正常宽高​ 2.图像只设置宽度,高度自适应​ 3.图像只设置高度,宽度自适应​ 4.图像同时设置宽和高, 可能会导致图像变形 a href: “链接指向的页面 URL”target: “新页面打开方式” base target: “所有页面打开方
html头部中各式各样的meta
weixin_30668887的博客
06-05 290
在写网页的过程中，第一步就是创建一个html文档。如下是最简单的 html5 文档。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="wid...
HTML快速入门
zy010101博客
05-26 2154
HTML快速入门 快速入门主要是掌握常用的标签 head中的标签 head中最常用的就是指定编码和设置标题这两个标签。 通常我们在head中会设置编码格式为uft-8，例如： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> 另外就是在head中指定页面在浏览器标签页显示的名称，使用title标签。例如： <!DOCTYPE html> <html&gt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值