HTML的简单入门

最新推荐文章于 2023-09-06 08:30:00 发布

墨语秋

最新推荐文章于 2023-09-06 08:30:00 发布

阅读量163

点赞数

分类专栏： html基础文章标签： html5

本文链接：https://blog.csdn.net/weixin_44253162/article/details/110684164

版权

html基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML简单知识

HTML

HTML

html是一个超文本标签语言，超文本意味着，它什么都能放，包括文本，声音，图片视频等等

内容

首先，html要有元素，也就是标签类似于这种，这是双标签意味着它是成双成对出现的，在两者之间可以写内容，如果只有其中一个，那么恭喜你，代码写错了。
同样也有< img />这种单标签，只用写一个的元素
在写好标签后，有时还要给它一些属性，
例如：id:这个属性类似于身份证号，不要取重复的值
class：这个标签类似于分组，将有相同需求的标签分成一组
title：当鼠标悬停在当前标签内容上是会显示的内容
style：这是给标签样式，就是大小颜色等

结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
	</head>
	<body>
        
	</body>
</html>

以上是html标签的统一基本结构，一般而言，在编写html的工具中会自动生成这些代码，如果没有，请通过快捷方式或者手写输入
最上面的带！的标签是告诉浏览器遵循那种规范，默认为H5的规范
html是根标签包含所有内容
head是表示头部信息
meta标签表示描述信息，里面写的charset是字符集，也就是阅读方式为utf-8，这是可以读出中文的字符集，当然还有很多其他的字符集,
title是网页的标题
如：
在这里插入图片描述
里面的百度一下就是title
body里面写的是网页的主题，也就是我们看到的网页中显示的内容

常用标签普及

一般有：
h：有h1到h6，是双标签一般用来写标题，内容会大号加粗
p：双标签，用来给内容分段
hr：可以在网页中显示一条分割线
strong：将字体加粗
em：显示斜体
u：给内容下划线
del：在文字正中加横线，表示删除
br：很重要，用来换行，单标签
font：字体的标签，用来设置字体属性
img：图片标签，用法< img src"图片路径" width=""(图片宽) height=""(图片长)>
a：链接标签，用法< a herf=“网页地址”>可以写内容< a />点击后进行网页跳转
ol/li：有序列表，写法：

<ol>
		<li>内容一</li>
		<li>内容二</li>
		<li>内容三</li>
</ol>

ul/li：无序列表，写法与有序列表类似：

<ul>
		<li>内容一</li>
		<li>内容二</li>
		<li>内容三</li>
</ul>

div：盒子标签，一般用来做页面布局，用来包裹其他标签
table/tr/td：表格标签，用法：

<table >	
    <tr>
        <td>一行一列</td>
        <td>一行二列</td>
        <td>一行三列</td>
    </tr>
    <tr>
        <td>二行一列</td>
        <td>二行二列</td>
        <td>二行三列</td>
    </tr>
    <tr>
        <td>三行一列</td>
        <td>三行二列</td>
        <td<三行三列</td>
    </tr>
</table>

table的属性：
border：这是设置表格额度线宽与颜色等样式
cellpadding：表示边框跟单元格内容的间距
cellspacing：表示表框跟边框之间的间距距离
align：表示表格在网页中水平的对齐方式
width：表示宽度，可以是像素，也可以是百分比
height：表示高度，单位像素
tr的属性；同样可以设置宽高，也可以用
align表示单元格内容在水平方向上的对齐方式
valign表示单元格内容在竖直方向上的对齐方式
td的属性：
rowspan：表示跨行，但是要将不同行被覆盖的td标签删除
colspan：表示跨列，同样将同一行被覆盖的td标签删除

还有form表单：这一般是用来提交页面数据的

<form aciton="表单提交地址">
  用户名：<input name="name" type="text"/>（这个input会显示输入，可写字符串）
  密码：<input name="pwd" type="password"/>（这一个会将输入的数据隐藏）
  <input type="radio" value="boy" name="sex" /> 男
  <input type="radio" value="girl" name="sex" /> 女
  上面的是单选框，通过相同额度name值，让它只能选中一个
  <input type="checkbox" value="study" name="hobby" /> 学习
  <input type="checkbox" value="game" name="hobby" /> 游戏
  <input type="checkbox" value="girl" name="hobby" /> 女孩
  这一段是多选框，相同的name值表示这是同一类别的选项
  <input type="button" value="点击我" />普通的按钮
  <input type="image" src="img/a.PNG" />图片按钮，按钮内容显示为图片，可以点击
  <select >这是下拉框
        <option value=" "></option>标签中写入值，value是选中下拉框的值后，提交表单时会被接受到的值
        <option></option>
        <option></option>
        <option></option>
	</select>
	<textarea name="introduce">这个家伙很懒，什么也没有留下...</textarea>
	上面是文本域，可以写入一段很长的文本，也可以规定文本的长度
	<input type="file" name="my_file" />文件域，可以提交文件
  <input type="submit" value="登录" />提交按钮，点击这个按钮表单会提交，在表单中生效
  <input type="reset" value="重置" />将表单中用户输入的数据都还原成初始状态，表单中生效
  以上是常用的表单标签，还有一些类型为：
邮箱：<input type="email" name="email" />必须为邮箱格式
URL: <input type="url" name="url" />只能为网址格式
数量: <input type="number" name="num" max="100" min="0" step="1" />只能为数字，最大100一次加减一
音量: <input type="range" name="voice" min="0" max="100" step="2" />滑块，最大100一次两格
搜索: <input type="search" name="search" />
颜色: <input type="color" name="color" value="#00ff00" />
出生日期: <input type="datetime-local" name="birthday" />
星期: <input type="week" name="week" />
< / form>

墨语秋

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML的简单入门

HTML简单知识HTML内容结构常用标签普及HTMLhtml是一个超文本标签语言，超文本意味着，它什么都能放，包括文本，声音，图片视频等等内容首先，html要有元素，也就是标签类似于这种，这是双标签意味着它是成双成对出现的，在两者之间可以写内容，如果只有其中一个，那么恭喜你，代码写错了。同样也有< img />这种单标签，只用写一个的元素在写好标签后，有时还要给它一些属性，例如：id:这个属性类似于身份证号，不要取重复的值class：这
复制链接

扫一扫