分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

html基础(一)

发布时间:2023-09-06 02:17责任编辑:苏小强关键词:暂无标签

  html是用来描述网页的一种语言,指的是一种超文本标记语言(Hyper Text Markup Language)标记语言是一套标记标签,THML标签是由尖括号包围的关键字,通常是成对出现的,标签中的第一个标签是开始标签,第二个标签是结束标签也可以叫做开放标签和闭合标签。

  例如:
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

HTML的标记
1.文件标记
<!DOCTYPE html> </html> 表示告诉浏览器这是一个html文件,浏览器的兼容性问题。
<html> </html> 表示文本是网页
<head> </head> 表示文件头部
<title> </title> 表示标题
<body> </body> 表示文件正文部分
2.排版标记
<!--注释--> 表示对文件内容进行注释
<br/> 表示换行,使元素换行显示
<p> </p> 表示一个段落,后面的元素会换行显示,也就是说会留出一行的空格
<hr/> 表示在页面中间插入一条横线
<center></center> 表示内容居中显示
<pre> </pre> 表示预设格式,也就是说让内容按照预设格式排版
3.字体标记
<strong> </strong> 表示强调语气,是文字加粗
<b> </b>  表示加粗,标签却不同这样的目的是方便以后有一些自动读取系统根据不同的标签提取信息
<i> </i> 表示斜体
<em> </em> 表示斜体(强调)
<u> </u> 表示为元素添加一条下划线
<ins> </ins> 表示强调下划线
<h1`h6> </h1`/h6> 表示一级到六级的标题
<font> </font> 表示字体标记(可以控制字体大小、颜色、式样)
&nbs; 表示空格
<bdo> </bdo> 表示正反字体
<big> </big> 表示字体稍微加大
<small> </small> 表示字体稍微缩小
<strike> </strike> 表示为文字添加一条删除线,较少使用
<sub> </sub> 表示添加下标
<sup> </sup> 表示添加上标
4.清单标记
<ol> </ol>
表示有序清单,清单会按照阿拉伯数字或英文字母或者罗马数字,但是这个标记要结合li标签使用
<ul> </ul>
表示无序清单,只会在清单前面出现小圆点,而没有序号,这个标记同样要结合li标签使用
5.表格标记
<table> </table> 表示表格可以定义表格的一些参数
border 表示表格框的厚度
<caption> </caption> 表示表格的标题
<tr> </tr> 表示表格的行
<th> </th> 表示表格的列,但是这个列中的内容会稍微加粗
<thead> </thead> 表示第一行列表
<td> </td> 表示标准单元格
clospan 表示可以横跨的列数
align 表示对齐的方式

6.表单标记
<form> </form> 表单标签可以定义表单的运行模式
action 表示提交的地址
method 表示提交方式
<textarea> </textarea> 表示文字域,可以在该范围写大量的文字
<input/> 表示输入框
type 表示数据的类型
submit 表示确定、提交
reset 表示重置
text 表示一般文本
button 表示按钮
value 表示给数据赋值
placeholder 表示提示内容
flie 表示文件
password 表示密码
<select> </select> 表示下拉列表,要结合option使用
7.其他标记
<img/> 表示图片标记
src 表示路径
height 表示高度
width 表示宽度
<audio> </audio> 表示音频
controls 表示控制、设置
<vedio controls="controls"><sourse src="?">
表示视频
<a> </a> 表示超链接
href 表示需要链接的目标
# id 表示目标的地址
<base> </base> 表示为页面设置路径
<meta> </meta> 表示标签优化

  8.html5新标记

   <canvas>  </canvas>  表示定义图形(画布)

   <datalist>  </datalist>  定义选项列表 input 可能的值 

   <keygen>  </keygen>  规定用于表单的密钥对生成器字段

   <output>  </output>  定义不同类型的输出,比如脚本的输出

<article>定义页面独立的内容区域。
<aside>定义页面的侧边栏内容。
<bdi>允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command>定义命令按钮,比如单选按钮、复选框或按钮
<details>用于描述文档或文档某个部分的细节
<dialog>定义对话框,比如提示框
<summary>标签包含 details 元素的标题
<figure>规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption>定义 <figure> 元素的标题
<footer>定义 section 或 document 的页脚。
<header>定义了文档的头部区域
<mark>定义带有记号的文本。
<meter>定义度量衡。仅用于已知最大和最小值的度量。
<nav>定义导航链接的部分。
<progress>定义任何类型的任务的进度。
<ruby>定义 ruby 注释(中文注音或字符)。
<rt>定义字符(中文注音或字符)的解释或发音。
<rp>在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section>定义文档中的节(section、区段)。
<time>定义日期或时间。
<wbr>规定在文本中的何处适合添加换行符。

  
例如:一个简单的登录页面
<!DOCTYOP html>
<html>
<head>
<title>这是窗口标题</title>
</head>
<body background="这是背景图片的路径">
<center>
<form action="login.jsp" method="post">
<table border="1">
<tr>
<td>用户名:<input type="text" name="uname" ></td>
</tr>
<tr>
<td>密&nbsp;码:<input type="password" name="pwd"></td>
</tr>
<tr>
<td>验证码:<input type="text" name="code"></td>
</tr>
<tr>
<td><img src="这是图片的路径"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="注册">
</td>
</tr>
</table>
</form>
</center>
</boby>
</html>
<!--注释内容-->
给自己看,防止自己看不懂;方便记忆与理解。
给别人看,方便别人去理解;保证代码能运行。
良好的书写习惯能够减少代码的出错率。
行内元素和文档流的概念
·文档流就是将窗体自上而下分为一行行,并在每行中按照元素从左至右的顺序排放,即文档流。
·块级元素具有以下特点:在标准的文档流里面
-总是在新行上开始,占据一整行
-高度行高以及外边距和内边距都可控制
-宽度始终与浏览器宽度一样与内容无关
-它可以容纳内联元素和其他块级元素
·行内元素的特点
-和其他元素都在一行上
-行内元素只能容纳文本或者其他行内元素
-宽度只与内容有关
-不可以设置宽度;其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置内外边界,但是内外外边界不对上下起作用只能对左右起作用。(内边界Ie6中对上下不起作用)

html基础(一)

原文地址:https://www.cnblogs.com/skynomonarch/p/9768132.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved