1 什么是HTML?

HTML 指的是超文本标记语言 (Hyper Text Markup Language)。不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML 使用标记标签来描述网页。

2 HTML标签

HTML 标签是由尖括号包围的关键词,比如 <html>; 标签通常是成对出现的,标签对中的第一个标签是开始标签,第二个标签是结束标签。

标签分类:

  • 双标签
  html     <标签名> 内容 </标签名>

  • 单标签(也称为空标签)
  hr        <标签名 />

标签关系分为两种:

  • 嵌套关系
  <head><title> </title></head>

  • 并列关系
  <head></head><body></body>

3 HTML基本结构

如下所示:

<!DOCTYPE html>
<head><title> </title>
</head>
<body>...</body>
</html>
​代码讲解:
1. <html></html>称为根标签,所有的网页标签都在<html></html>中。
2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。
头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。
3. 在<body>和</body>标签之间的内容是网页的主要内容,
如<h1>、<p>、<a>、<img>等网页内容标签,
在这里的标签中的内容会在浏览器中显示出来。
​在head中设置网页标题和字符集编码
<head><title>这里是标题</title><meta charset="utf-8"/>
</head>

4 标签语义化

所谓标签语义化,就是指标签的含义。

​为什么要有语义化标签?

  • 方便代码的阅读和维护。
  • 同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容 。
  • 使用语义化标签会具有更好地搜索引擎优化。

语义是否良好,在于当我们去掉CSS之后,网页结构依然阻止有序,并且有良好的可续性。也就是说,一眼看去知道哪个是重点结构是什么,知道每一块的内容有什么作用。

​遵循的原则是先确定语义的HTML,再选合适的CSS。

5 段落标签

<p>段落 </p>
<p>标签的默认样式,段前段后都会有空白。

6 换行标签

如果希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签:
<p>Helloween<br/>World!<br/>I'm Coming!</p>

7 标题标签

标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法: <hx>标题文本</hx> (x为1-6)​

标题标签的样式都会加粗,h1标签字号最大,h2标签字号相对h1要小,以此类推h6标签的字号最小。一个标题标签要独占一整行。

8 水平线标签

<hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。
<p>Welcome to China!</p>
<hr/> 是单标签
<p>Thank you!</p>

9 注释

注释的作用是为了解释代码的用途,方便程序员查找以及他人阅读。常见的注释有:

<!--注释-->
/*注释*/
可以使用快捷键  ctrl+/ 或者 ctrl+shift+/

10 div span标签

div span没有语义,它的作用是为了结合CSS设置单独的样式使用。

语法:
<div>分割</div>
<span>跨度</span>

11 列表

列表分为无序列表、有序列表和自定义列表

  • 无序列表:使用ul-li标签实现,没有前后顺序的信息列表。

语法:

<ul>   <li>3</li><li>2</li><li>1</li>
</ul>

  • ​有序列表:使用ol-li标签实现,是有前后顺序的信息列表。

语法:

<ol><li>1</li><li>2</li><li>3</li>
</ol>

  • 自定义列表:使用dl-dt-dd标签实现,通常用于对术语或名词进行解释和描述,自定义列表的列表项前没有任何项目符号。

语法:

<dl><dt></dt><dd></dd><dd></dd><dt></dt><dd></dd><dd></dd>
</dl>

12 表格

创建表格几元素:table(定义表格)、tr(行)、td(列)、thread(表格头部)、th(表格表头)、tbody(表格主体)

除此之后还有<caption>指定表格标题,rowspan合并行,colspan合并列。

语法:

<table><caption>标题</caption><tr>第一行<td>第一列</td><td colspan="2">跨两列</td><td></td></tr><tr>第二行<td>第二列</td><td></td><td></td></tr>
</table>

13 超链接

超链接类型分为三种:1 内部链接 2 外部链接 3 锚链接

语法:

<a href="跳转目标" target="目标窗口的弹出方式" title="鼠标滑过显示的文本">链接显示的文本</a>
href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。
Hypertext Reference的缩写。意思是超文本引用
target:用于指定链接页面的打开方式,其取值有_self和_blank两种,
其中_self为默认值,_blank为在新窗口中打开方式。

注意

1.外部链接 需要添加 http:// http://www.baidu.com

2.内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >

3.如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

​锚点定位 (难点)

通过创建锚点链接,用户能够快速定位到目标内容。创建锚点链接分为两步:

  • 使用“a href=”#id名>“链接文本"</a>创建链接文本(被点击的)

<a hef="#mao"></a>

  • 使用相应的id名标注跳转目标的位置。

<a id="mao">跳转到锚链接</a>

14 图片

语法:

<img src="图片地址" alt="指定图像的描述性文本,当图像不可见时(下载不成功时),
可看到该属性指定的文本" title = "提示文本">

15 表单

网站怎样与用户进行交互?

答案是使用HTML表单(form)。

表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

<form method="传送方式" action="服务器文件" name="表单名称">
action:在表单收集到信息之后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的URL地址。
method:用于设置表单数据的提交方式,取值为get或post。
name:用于知道你跟表单的名称,以便于区分同一个页面中的多个表单。

​表单控件:单行文本输入框、密码输入框、复选框、单选框、提交按钮、重置按钮等,都必须放在<form></from>标签之间。

​单行文本输入框:当用户要在表单中输入字母、数字等内容时,就需要文本输入框,文本框也可以转化为密码输入框。

语法:

<form><input type="text/password" name="名称" value="文本" />
</form>
当type="text"对应的就是文本输入框;当type="password",对应的就是密码输入框。

​复选框:

<input type="checkbox" value="值" name="名称" checked="checked"/>
比如个人资料填写爱好的勾选

单选框:

<input type="radio" value="值" name="名称" checked="checked"/>  比如性别的选取

多行文本框:

<textarea rows="行数" cols="列数">文本</textarea>  比如备注的填写

下拉框:

<select><option value="提交值" selected="selected">选项值</option><option value="提交值">选项值</option><option value="提交值">选项值</option>
</select>

​按钮:

提交按钮 <input type="submit" value="提交">
重置按钮 <input type="reset" value="重置"/>

itextpdf将带复选框的html_HTML基础知识相关推荐

  1. itextpdf将带复选框的html_使用flying-saucer 实现 html转pdf实现input框select,textarea checkbox等的显示...

    com.itextpdf itextpdf ${itextpdf.version} com.itextpdf itext-asian ${itext.asian.version} 中文显示问题解决了, ...

  2. html 复选框 mysql_Html:实现带复选框的下拉框(一)

    概述 项目中要用到可多选的下拉框(select),发现HTML中无此控件,故手动模拟实现一下. 模拟所用元素:input,ul,li 代码 模拟实现带复选框的下拉列表 body{ margin: 20 ...

  3. element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码

    一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...

  4. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单

    jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...

  5. Material UI 带复选框表格获取选中值(索引)

    vue+Material UI 带复选框表格获取选中值(索引) 发现问题 解决 写在最后 发现问题 神坑UI框架–Material,这款框架我不晓得为什么会这么坑,有这么多的问题为什么会被推出来,真的 ...

  6. HTML复选框里添加下拉框,Html:实现带复选框的下拉框(一)

    概述 项目中要用到可多选的下拉框(select),发现HTML中无此控件,故手动模拟实现一下. 模拟所用元素:input,ul,li 代码 模拟实现带复选框的下拉列表 body{ margin: 20 ...

  7. 关于JFace带复选框的树

    树的复选框用CheckboxTreeViewer实现.由于其子类ContainerCheckedTreeViewer在没有选择全部子节点时可以自动将父节点设置成灰选,所以实现树的复选框更多的是用Con ...

  8. html带复选框的表格,Html 表格行 ID 复选框

    我想将每一行的数据库表 id 作为动态 html 表的复选框值 我正在使用 ajax 从 mysql 数据库中获取数据并创建一个新变量作为 html 文本附加到表的 tbody 上 HTML代码 Vi ...

  9. ExtJs中定制日历控件——带复选框

    效果图: 代码: /*********************日历组件部分**************************** begin */ var dateArray = new Array ...

最新文章

  1. 第六章 MVC之 FileResult和JS请求二进制文件
  2. 为什么有这个提示“Escape character is '^]'.”?(转载)
  3. 算法分析股票类型的相关题型
  4. 六、递归(Recursion)
  5. jvm学习笔记(1)——java虚拟机内存区域
  6. 苹果新Mac Pro生产线将从美国转至中国 会更便宜吗?
  7. python里边的单词都表示什么_Python:只保留字符串中的单词,每个单词都在newlin上...
  8. Chrome 52的变化
  9. Leetcode 687.最长同值路径
  10. Android Multimedia框架总结(二十四)MediaMuxer实现手机屏幕录制成gif图
  11. 环境影响评价期末复习
  12. 坚果云企业版服务器端,坚果云企业版
  13. 遇见Linux系统CPU使用率过高怎么办?
  14. Twitter、Google背后的“卖水人”,力盟科技也来港股分一杯羹?
  15. 教学信息管理系统+SQL
  16. Python pandas.DataFrame.combine_first函数方法的使用
  17. qq空间把android改成iphone,装逼时代 教你如何修改QQ微信小尾巴为来自iphone6
  18. 【NOIP1999普及组】Cantor表
  19. 信奥要学哪些数学知识 学信奥要不要先学python
  20. java 手动内存回收_java内存与回收调优

热门文章

  1. play for scala 通过网易smtp发送邮件
  2. linux 卸载、安装mysql
  3. isset,empty,is_null小知识
  4. vmware-linux虚拟机上网配置
  5. CentOS中获取文件的前四个字节的16进制值
  6. ASP人事工资管理系统毕设
  7. python 熊猫钓鱼_Python数据结构与算法之使用队列解决小猫钓鱼问题
  8. ArrayList 与 LinkedList 插入、查询效率测试
  9. 数据结构与算法之-----图(代码实现)
  10. 命令查看mysql 是否安装_验证mysql是否安装成功的方法