html基础

最新推荐文章于 2024-09-27 11:01:06 发布
最新推荐文章于 2024-09-27 11:01:06 发布
阅读量65 收藏
点赞数
分类专栏： HTML 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45998542/article/details/121778762
版权

html

1.标签

<!DOCTYPE html>
<!-- 声明html5 -->
<html lang="en">
<!-- 语言中英文“en”  中文“zh-CN” -->

<head>
    <meta charset="UTF-8">
    <!--UTF-8 万国码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 双标签 单标签  包含关系 并列关系  -->
    <!-- 标签都是有语义的，合理的地方用合理的标签，例如标题用h，段落用p  -->
    <h1 id="hh">标题一共六级选,</h1>
    <p>段落</p>
    <p>duanluo2</p>
    <h2> 文字加粗一行显。</h2>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>
    </div>
    <br />
    <!-- 单标签 -->

    <strong>qqq </strong>
    <!-- 加粗strong -->
    <strong>qqq </strong>
    <em>qqqq</em>
    <!-- 斜体em  -->
    <em>qqqq</em>
    <del>qqqq</del>
    <!-- 删除线 del -->
    <del>qqqq</del>
    <ins>钱钱钱</ins>
    <!-- 下滑线 ins -->
    <ins>钱钱钱</ins>

    <div>独占一行</div>
    <span>一行显示</span>
    <!-- 敲再多的空格最终也只呈现一个空格 -->
    <!-- div和span 均无实意，div 独占一行，span一行显示 -->

2.图像

<h4>图像标签的使用</h4>
    <img src="../img.jpg" alt="qin" title="qin" width="500" height="599" border="15" />
    <!-- 上一级../下一级images/ 同级直接写文件名，相对路径 -->
    <!-- 文件在电脑中的地址，或者图片在网址中的地址，相对路径 -->
    <h4>图像标签的使用</h4> 
绝对路径
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="woshi qinrui" title="woshi qinrui" width="600px" height="600px" border="15" /> 
相对路径
    <img src="C:\Users\lenovo\Desktop案例\images\img.jpg" alt="woshi qinrui" title="woshi qinrui" width="600px" height="600px" border="15" />
    <!-- alt 图片显示不出来时显示文字 title鼠标滑倒图片上时显示文字 height 高度 width宽度 border边框  -->

3.链接

 <a href="http://www.baidu.com" target="_self">baidu</a>
    <a href="http://www.baidu.com" target="_self">baidu</a>
    <a href="http://www.baidu.com" target="_self">baidu</a>
    <a href="http://www.baidu.com" target="_blank">baidu</a>
    <!-- 外部链接  默认打开_self 当前窗口打开  _blank新窗口打开 -->
    <a href="test.html" target="_blank">内部链接</a>
    <!-- 内部链接选取同一文件夹下的网址 -->
    <a href="#">空链接</a>
    <!-- 用于没写完的网页 -->
    <a href="../img.zip">下载文件</a>
    <!-- 用于下载文件，文件时zip或者exe形式 -->
    <a href="test.html" target="_blank"><img src="../img.jpg" alt="123" title="123"></a>
    <!-- 用于图片链接跳转，包括音频、视频等元素都可以使用 -->
    <a href="#h1">2</a>
    <a href="#hh">回顶部</a>
    <br />
    <br />
    <h3 id="h1">ruirui</h3>
    <!-- 锚点链接，用于跳转到同一页面中的指定位置 -->
    <!-- 链接过多一般用li+a，直接写链接会降低网页权重 -->
    <!-- 注释 -->
    秦&nbsp;瑞 <br />&lt;p&gt;是一个段落

4.表格

 <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
        <!-- 表格属性设置，位置，边框，高度，宽度 -->
        <thead>
            <tr>
                <th colspan="3">姓名</th>
                <!-- 合并列之间colspan -->
            </tr>
        </thead>
        <!-- 表头 -->
        <tbody>
            <tr>
                <td>刘德华</td>
                <td rowspan="2">男</td>
                <!-- 单元格合并，合并行之间rowspan -->
                <td>51</td>
            </tr>
            <tr>
                <td>张学友</td>
                <td>52</td>
            </tr>
        </tbody>
        <!-- 表体 -->
    </table>

5.列表

 <h4>你喜欢吃什么</h4>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>
    <!-- 无序列表 用的比较多-->
    <h4>排行榜</h4>
    <ol>
        <li>刘德华100</li>
        <li>刘若英100</li>
        <li>刘欢100</li>
        <!-- 有序列表  -->
    </ol>
    <dl><dt>名词一</dt>
        <dd>名词一解释一</dd>
        <dd>名词一解释二</dd>
        <dt>名词一</dt>
        <dd>名词一解释一</dd>
        <dd>名词一解释二</dd>
    </dl>
    <!-- 自定义列表，多个对一个的解释，但需注意是dd和dt间是并列关系 -->
    <!-- 注意区别什么时候用自定义，什么时候用无序 -->

6.表单

 <form action="pxjx.php" method="GET" name="name1">
        <!-- 表单 from -->
        <label for="uername">用户名</label>
        <!-- 提升用户体验 -->
        <input type="text" name="username" value="请输入用户名" maxlength="6" id="uername" />
        <!-- 文本框 点击文本框会有默认的蓝色边框，需手动清除，设置样式outline:none-->
        <br /> 密码: <input type="password" name="password" value="#" />
        <!-- 密码框 password -->
        性别：
        <input type="radio" name="sex" value="男" id="man"><label for="man">男</label>
        <input type="radio" name="sex" value="女" checked="checked">女
        <!-- 默认打开，checked="checked" -->
        <!-- 单选按钮 要有相同的name值-->
        <br /> 爱好：
        <input type="checkbox" name="hobby" value="吃饭">吃饭
        <input type="checkbox" name="hobby" value="吃饭">吃饭
        <input type="checkbox" name="hobby" value="吃饭">吃饭
        <input type="checkbox" name="hobby" value="吃饭">吃饭
        <!-- 复选按钮 要有相同的name值-->
        <!-- 输入框input  type不同种类不同 -->
        <input type="submit" name="tijiao" value="提交">
        <!-- submit提交按钮，将from中的信息提供给后台 -->
        <input type="reset" name="huanyuan" value="重置按钮">
        <!-- reset重置按钮 -->
        <input type="button" name="" value="获取验证码">
        <!-- 普通按钮，结合js按钮,button默认有个边框需要我们手动去掉 -->
        <button disabled="disabled">disabled是禁用按钮</button>
        <input type="file">
        <!-- 上传文件 -->

        <br/> 城市： <select>
           <option>青岛</option>
           <option>浙江</option>
           <option selected="selected">成都</option></select>
        <!-- </select> 下拉框 <select name="" id=""></select> 至少包含两个
        <option value=""></option> -->

        <br />留言： <textarea cols="4" rows="4">woshiqinrui</textarea>
        <!-- 文本域用于大量文字输入内容 文本域必须写在一行里，不然页面显示框框里会有空白距离 -->
        <!-- 一般网页中，会去掉文本域拖拽属性，需手动设置样式resize:none -->
    </form>
是瑞瑞小甜心
关注
专栏目录
HTML基础模板
qq_61690596的博客
07-18 2094
HTML基本模板，每个基础元素的内容和作用
HTML基础入门教程
lanadelrey13的博客
04-13 3484
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 一、HTML编辑器推荐 博主使用的是VS Code工具(Visual Studio Code)来编辑HTML，也可以使用其他更专业的编辑器。 VS Code安装教程参考：VScod..
HTML基础知识点
qq_40046544的博客
07-27 8860
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础标签
weixin_45348240的博客
03-23 6096
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
HTML基础
EX1332914934的博客
10-05 1万+
1.HTML初识 HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML总结： html 是超文本标记(标签)语言 我们学习html 主要学习html标签 我们用html标签描述网页元素。 比如 图片标签 、文字标签、链接标签等等 标签有自己的语法规范，所有的html标签都是用 <> 表
全网最全HTML基础
a1085653724的博客
04-20 5158
1.HTML结构 认识 HTML 标签 ，HTML 代码是由 "标签" 构成的。 形如: <body>hello</body> (1).标签名(body)放到<>中. (2).大部分标签成对出现,<body>为开始标签,</body>为结束标签. (3).少数标签只有开始标签, 称为 "单标签". (4).开始标签和结束标签之间, 写的是标签的内容.(hello everyone) (5).开始标签中可能会带有 "属性". id
HTML基础知识
xuan971130的博客
03-02 2938
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
HTML基础之表单制作
热门推荐
TangJing_的博客
05-14 2万+
一、知识点 1、表单的作用： 信息的收集 数据的验证 在线考试 调查问卷 2、表单的构成 提示性文字：提示用户如何操作（一般由placeholder属性完成） 表单域：相当于一个容器，包含若干表单控件 表单控件：具体的功能项（按钮，下拉列表，输入框等） 3、表单域 <form action="远程服务器的URL(存放地址)" method="信息的提交方式" name="表单名"> 表单内容 </form> 4、表单控件 （1）input：输入框。都有val
HTML基础知识总结
ss810540895的博客
05-05 8738
是告诉浏览器这是html文档的开始。Html文档的最后一个标签是之间的文本是头部信息，在之间的文本是文档标题，会显示在浏览器的窗口的标题栏。设置网页编码的语句为，是在
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4821
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
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">
HTML基础网页布局代码写法
m0_51826406的博客
03-07 8812
W3C标准 W3C World Wide Web Consortium 万维网联盟 中立性技术标准机构 W3C标准包括 结构化标准语言（HTML XML） 表现标准语言（CSS） 行为标准（DOM ECMAScript） 在idea创建一个工程 开始学习HTML基础 <!--注释 DOCTYPE：告诉浏览器我们使用什么规范 --> <!DOCTYPE html> <html lang="en"> <!-- head代表网页头部 --> <hea
python：基于django的html订单提交页面
我是你大爷
09-23 663
这里给出一个基于django的html订单提交页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能。
python：基于django的html二维码页面生成功能页面
我是你大爷
09-23 484
这里给出一个基于django的html二维码页面生成功能页面，具有文件上传和订单提交两个功能，使用javascript来代理实现交互功能（包含无限扩展内容框生成功能）。
HTML中的padding和margin
学无止境
09-27 428
作用增加元素内部的空间，使内容不显得过于拥挤。可以用来突出元素的重要性或增加视觉层次感。语法（分别对应上、右、下、左的内边距值为 10 像素和 20 像素）。也可以使用缩写形式，如（四个方向内边距均为 10 像素）。示例假设一个<div>元素，设置了，那么这个元素内部的内容与边框之间就会有 20 像素的距离。二、Margin（外边距）Margin 是指元素边框与相邻元素之间的距离。它用于控制元素之间的间隔。作用分隔不同的元素，使页面布局更加清晰。可以用来调整元素在页面中的位置。语法。
网页设计html心得
ikunlxx的博客
09-23 802
CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等，但是各个浏览器对它的支持不统一，所以流行的版本仍然是CSS3。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
html,js,react三种方法编写helloworld理解virtual dom
09-23 561
学习任何一个新语言，好像都从helloworld开始。：）。
CSS选择器的全面解析与实战应用
最新发布
会思想的苇草i的博客
09-27 470
本文全面介绍了CSS选择器的种类与应用技巧，从基本的选择器如类型、类和ID选择器，到复合选择器如后代、相邻及通用兄弟选择器等，再到伪类和伪元素的选择器使用方法。通过详细的示例和最佳实践，帮助读者理解和掌握如何精确地定位页面元素，从而更高效地管理和优化CSS样式表，实现复杂的设计布局需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值