html 基础

最新推荐文章于 2024-05-28 22:57:50 发布
最新推荐文章于 2024-05-28 22:57:50 发布
阅读量166 收藏
点赞数
分类专栏： web前端 # html
原文链接：https://www.cnblogs.com/clschao/articles/10077261.html
版权

HTML文档结构

<!DOCTYPE html>         # 声明为html5
<html lang="zh-CN">     # 这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'
<head>                  # 给浏览器的信息
  <meta charset="UTF-8"># 声明编码
  <title>css网页标题</title>
</head>
<body> 
网页主页内容
</body>
</html>

 

head内常用标签

标签意义
<titile></title>定义网页标题
<style></style>定义内部样式表
<script></script>定义JS代码块或引入外部JS文件
<link/>引入外部样式表文件
<meta/>定义网页源文件

 

Meta标签

  • 元素可提供有关页面的元信息（meta-information）,针对搜索引擎和更新频度的描述和关键词。
  • 标签位于文档的头部，不包含任何内容。
  • 提供的信息是用户不可见的。
  • meta标签组成部分：：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 
    1. http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
    2. name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.csdn.com"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行
<!--指定文档的编码类型--> 
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的，就是怎么让你们公司的网站在别人搜索的时候能够靠前显示，不算那个花钱的，百度是充值的，你冲个20w，别人可能一天就给你点击完了，特别的贵
<meta name="description" content="xxxxxpythonxxx学习">  #是对这个文档的描述，在百度一些内容的页面上，f12打开看看

 

body内常用标签

标签分类：

  • 内联标签：也叫行内标签，不独占一行
  • 外联标签：也叫外行标签，独占一行

基本标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除(中横线)</s>

<p>段落标签</p> #独占一个段落

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线\分割线-->
<hr>

img标签

图片标签
属性 src='图片路径'  网络地址的绝对路径\本地相对路径
示例:
<img src="1.jpg" alt="这是个美女,请稍等.." title="美女" width="200" height="200">

a标签 超链接标签

属性
href:超链接的地址
target:是否新建窗口
target="_self"  当前窗口打开某个路径对应的html页面
target="_blank" 新建窗口打开某个路径对应的html页面
示例:
<a href="https://www.baidu.com" target="_blank">百度</a>

列表标签

无序标签：
<ul type="none">
    <li>路飞</li>
    <li>娜美</li>
    <li>索隆</li>
</ul>

有序标签：
<ol type="a" start="2">
    <li>路飞</li>
    <li>娜美</li>
    <li>索隆</li>
</ol>

标题列表标签：
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

特殊字符

空格:&nbsp;
小于号:&lt;
大于号:&gt;
&符号:&amp;

表格标签

table
cellpadding:文字和内边框的距离
cellspacing:内边框和外边框的距离
border:边框宽度

<table border="1" cellpadding="10" cellspacing="20">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>路飞</td>
        <td>18</td>
        <td>冒险</td>
    </tr>
    <tr>
        <td>娜美</td>
        <td>19</td>
        <td>money</td>
    </tr>
    <tr>
        <td>索隆</td>
        <td>20</td>
        <td>喝酒和睡觉</td>
    </tr>
    </tbody>
</table>

form标签和input标签

<div>
    action:指定数据提交路径<br>
    input标签:<br>
    type属性:控制输入框的样式的<br>
        name属性:分组,携带数据的key key:value<br>
        value:选择框提交数据的时的值,输入框的默认值<br>
    input type属性的值:<br>
        text 单行输入文本<br>
        password 密码输入框（不显示明文）<br>
        date 日期输入框<br>
        checkbox 复选框<br>
        radio 单选框<br>
        submit 提交按钮  #发送浏览器上输入标签中的内容，配合form表单使用，页面会刷新<br>
        reset 重置按钮  #页面不会刷新，将所有输入的内容清空<br>
        button 普通按钮<br>
        hidden 隐藏输入框<br>
        file 文本选择框<br>

</div>
<br><hr>
<div>
<form action="http://127.0.0.1:8001">

    用户名:<input type="text" name="username" value="路飞">
    密码:<input type="password" name="password" value="111">
    <hr><br>
    <input type="radio" name="sex" value="1">男
    <input type="radio" name="sex" value="2">女
    <hr><br>
    <input type="checkbox" name="hobby" value="a"> 喝酒
    <input type="checkbox" name="hobby" value="b"> 抽烟
    <input type="checkbox" name="hobby" value="c"> 烫头
    <input type="submit">
    <hr><br>
    <input type="date">
    <input type="button" value="普通按钮">
    <input type="reset">
    <input type="hidden">
    <input type="file">
</form>
</div>
<hr><br>

form表单触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通的按钮
<input type="submit">
<button>提交按钮</button>
<hr><br>
input标签的其他属性
checked默认选中
<input type="radio" name="sex" value="2" checked>女 #简写方式,当属性名和属性值相同时可简写
<input type="checkbox" name="hobby" value="a"> 喝酒
<input type="checkbox" name="hobby" value="b" checked="checked"> 抽烟
<input type="checkbox" name="hobby" value="c" checked="checked"> 烫头
<hr><br>
readonly 只读 针对的是输入框 text password<br>
disabled 不允许操作 所有的input都可以设置<br>
设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的<br>

select标签

<p>多选:multiple</p>
<select name="city" multiple>
    <option value="1">北京</option>
    <option value="2" selected>上海</option>
    <option value="3">深圳</option>
</select>
<hr>
<p>单选</p>
<select name="city">
    <option value="1">北京</option>
    <option value="2" selected>上海</option>
    <option value="3">深圳</option>
</select>

label标签

<p>
方式1:for:执行对哪个标签进行标识<br>
效果:点击label标签中的文字,就能让标识的标签获得光标</p>
<label for="username">用户名</label>
<input id="username" type="text" name="username" value="路飞">
<br><hr>
<p>方式2:</p>
<label>
    密码:<input type="password" name="password" value="111" disabled>
</label>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>
<br>
name：名称<br>
rows：行数  #相当于文本框高度设置<br>
cols：列数   #相当于文本框长度设置<br>
disabled：禁用
 

 

CrazyDemo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML入门（详细）
qq_63525426的博客
05-03 2万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
HTML零基础入门教程（详细）
热门推荐
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
【前端学习笔记】HTML基础
最新发布
qq_46056318的博客
05-28 1001
HTML一、HTML介绍1.HTML概念2.文档声明3.字符编码4. HTML标签5. HTML属性二、标签1.meta标签2.语义标签3.布局标签4.列表5.超链接6.图片7.字符实体8.内联格式9.HTML 表格10.HTML 表单三、HTML5新特性1. 本地存储2. Cookie3. 语义化标签4.多媒体元素5.表单增强6.Canvas7.SVG 矢量图形支持8.拖放API9.地理定位10.离线Web应用程序 cache manifest11. Web Workers12.Web Sockets 一
动态网站开发01——HTML基础
qq_59071044的博客
04-07 1363
在里创建一个名称为的文件夹然后创建一个名为htmlDemo01的HTML文件。保存并运行程序，使用浏览器打开。
html基础知识
firenaimal的博客
04-06 2854
文本标签加粗加粗倾斜倾斜删除下滑线字体修饰标签有哪些？加粗
HTML基础知识总结
qq_40046544的博客
11-14 3789
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
HTML基础知识
12-20
HTML前端网页设计的一些小知识，非常适合初学者学习，
HTML基础
11-02
HTML基础 ppt
HTML基础笔记
02-06
HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记HTML 基础知识笔记
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
Html基础文档
09-13
HTML 免费
HTML基础知识点
qq_40046544的博客
07-27 8542
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
01：网页开发基础
XLLLXX的博客
05-18 188
在D:\web_work里创建一个名称为chapter01的文件夹，然后在该文件夹中新建一个文本文件（.txt后缀），将文件的名称更改为htmlDemo01，后缀名改为.html。 在htmlDemo01.html文件中编写代码 运行程序，使用浏览器打开htmlDemo01.html文件 目标：熟悉HTML的段内、行内和换行标签 在chapter01文件夹中新建HTML文件htmlDemo02.html 运行程序，使用浏览器打开htmlDemo02.html文件 目标：熟悉HTML的文本样式标签 在HT
JavaScript学习之HTML-demo
qq_43384071的博客
09-16 636
今天开始了新内容的学习，日常总结。 可以利用JavaScript来对html的元素/属性、css样式进行改变，并且可以对 html中的事件做出响应。 查找html元素 可以通过id来对html中的元素进行查找 例 html中有<p id="demo">hello</p> 那...
【前端】【HTML】基础知识
我的的博客哦
03-06 5884
🔰HTML指的是超文本语言，它是用来描述网页的的一种语言。🔰HTML不是编程语言，而是一种标记语言。🔰标记语言是一套标记标签。
创建纯HTML页面 demo示例
小范先生上行中的博客
05-17 3561
背景： 因为只作简单的接口测试使用，需要最低的开发成本实现，所以要实现一个纯HTML页面 开发步骤： 一、生成html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>读卡测试</title> </head> <body> /* 页面规划 */ </body&gt.
【HTML】HTML基础知识扫盲
弟弟的博客
10-30 3459
body > < dl > < dt > 标题 </ dt > < dd > 第一点 </ dd > < dd > 第二点 </ dd > < dd > 第三点 </ dd > </ dl > </ body >< body > < dl > < dt > 标题 </ dt > < dd > 第一点 </ dd > < dd > 第二点 </ dd > < dd > 第三点 </ dd > </ dl > </ body >
动态网站开发01网页基础
jjjhju的博客
06-14 212
动态网站开发01一、前言二、笔记（一）HTML 到底是什么？1、HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。2、HTML语言的基本格式（二） 常用的HTML标签1、段落、行内和换行标签2、文本样式标签3、表格标签4、表单标签(1)表单域(2) 表单控件5、多行文本标签。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值