html基础知识整理
html 标题
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
html注释:
html文档代码中可以插入注释,注释是对代码的说明和解释,注释的内容不会显示在页面上,html代码中插入注释的方法是:
<!-- 这是一段注释 -->
html换行
代码中成段的文字,直接在代码中回车换行,在渲染成网页时候不认这种换行,如果真想换行,可以在代码的段落中插入<br />来强制换行,代码如下:
<p>
一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用<br />
文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件<br />
渲染成网页,显示的网页可以从一个网页链接跳转到另外一个网页。
</p>
html块、含样式的标签
html块
1、div标签 块元素,表示一块内容,没有具体的语义。
2、span标签 行内元素,表示一行中的一小段内容,没有具体的语义。
含样式和语义的标签
1、em标签 行内元素,表示语气中的强调词
2、i标签 行内元素,原本没有语义,w3c强加了语义,表示专业词汇
3、b标签 行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名
4、strong标签 行内元素,表示非常重要的内容
语义化的标签
语义化的标签,就是在布局的时候多使用语义化的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多。
html图像、绝对路径和相对路径
html图像
标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字,以及对搜索引擎和盲人读屏软件的支持。
绝对路径和相对路径
像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址。
绝对地址:相对于磁盘的位置去定位文件的地址
相对地址:相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题。相对路径的定义技巧:
“ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录,比如:“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
html链接
标签可以在网页上定义一个链接地址,通过src属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。
<a href="#"></a> <!-- # 表示链接到页面顶部 -->
<a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>
<a href="2.html">测试页面2</a>
html表单
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,实现一个特定功能的表单区域(比如:注册),首先应该用<form>标签来定义表单区域整体,在此标签中再使用不同的表单控件来实现不同类型的信息输入,具体实现及注释可参照以下伪代码:
<!-- form定义一个表单区域,action属性定义表单数据提交的地址,
method属性定义提交的方式。 -->
<form action="http://www..." method="get">
<!-- label标签定义表单控件的文字标注,input类型为text定义了
一个单行文本输入框 -->
<p>
<label>姓名:</label><input type="text" name="username" />
</p>
<!-- input类型为password定义了一个密码输入框 -->
<p>
<label>密码:</label><input type="password" name="password" />
</p>
<!-- input类型为radio定义了单选框 -->
<p>
<label>性别:</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<!-- input类型为checkbox定义了单选框 -->
<p>
<label>爱好:</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<!-- input类型为file定义上传照片或文件等资源 -->
<p>
<label>照片:</label>
<input type="file" name="person_pic">
</p>
<!-- textarea定义多行文本输入 -->
<p>
<label>个人描述:</label>
<textarea name="about"></textarea>
</p>
<!-- select定义下拉列表选择 -->
<p>
<label>籍贯:</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<!-- input类型为submit定义提交按钮
还可以用图片控件代替submit按钮提交,一般会导致提交两次,不建议使用。如:
<input type="image" src="xxx.gif">
-->
<p>
<input type="submit" name="" value="提交">
<!-- input类型为reset定义重置按钮 -->
<input type="reset" name="" value="重置">
</p>
</form>
html基础知识整理的更多相关文章
- Kali Linux渗透基础知识整理(四):维持访问
Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...
- Kali Linux渗透基础知识整理(二)漏洞扫描
Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...
- 【OGG】OGG基础知识整理
[OGG]OGG基础知识整理 一.GoldenGate介绍 GoldenGate软件是一种基于日志的结构化数据复制软件.GoldenGate 能够实现大量交易数据的实时捕捉.变换和投递,实现源数据库与 ...
- java部分基础知识整理----百度脑图版
近期发现,通过百度脑图可以很好的归纳总结和整理知识点,本着学习和复习的目的,梳理了一下java部分的知识点,不定期更新,若有不恰之处,请指正,谢谢! 脑图链接如下:java部分基础知识整理----百度 ...
- wifi基础知识整理
转自 :http://blog.chinaunix.net/uid-9525959-id-3326047.html WIFI基本知识整理 这里对wifi的802.11协议中比较常见的知识做一个基本的总 ...
- JavaScript基础知识整理
只整理基础知识中关键技术,旨在系统性的学习和备忘. 1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN ...
- C#基础知识整理
年时,北风吹雁雪纷纷,一条秋裤冻上头.冷的连手都懒得动,就随便翻翻书,也没有更新博客,如今年已过,开始投入到正常的工作状态中,趁现在需求还没有来,把C#基础知识梳理一下,其实一直以来就想这样做的,对于 ...
- Oracle ASM 磁盘组基础知识整理(收藏版)
转至:https://cloud.tencent.com/developer/article/1494403 为什么要写这么一篇基础知识呢?还是有那么一点点原因的,不是胡编乱造还真是有真实存在的事件的 ...
- Linux基础知识整理
一.基础知识 1.Linux简介 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线程和多CPU的操作系统.它能运行主要的UNIX工具软件 ...
- Linux系统基础知识整理
一.说明 本篇文章,我将结合自己的实践以及简介,来对linux系统做一个直观清晰的介绍,使得哪些刚接触Linux的小伙伴可以快速入门,也方便自己以后进行复习查阅. 二.基本知识整理 1.Linux文件 ...
随机推荐
- tp实现多语言支持测试
用tp框架实现网页多种语言切换 时间:2016-11-11 浏览次数:1120 编辑:youjiejie 网页如何设计多种语言切换,本文用tp框架实现网页多种语言切换方法结合实例形式较为详细的分析 ...
- 【JSP】上传图片到数据库中
第一步:建立数据库 create table test_img(id number(4),name varchar(20),img long raw); 第二步:(NewImg.html) <h ...
- 完全掌握vuex
公司项目中大量的使用了vue,感觉对vue知识的掌握也越来越熟练了,录制视频教程也让我受益匪浅,自己成长的同时,我更希望帮助其他前端小伙伴一起成长.这篇文章我们主要讲解vuex. vuex是一个专门为 ...
- PAT_A1098#Insertion or Heap Sort
Source: PAT_A1098 Insertion or Heap Sort (25 分) Description: According to Wikipedia: Insertion sort ...
- 用doxygen风格注释代码生成文档
目录 用doxygen风格注释代码生成文档 1. 说明 2. 具体操作 2.1 生成头部注释 2.2 安装doxygen 2.3 工程配置 3. 总结 用doxygen风格注释代码生成文档 1. 说明 ...
- CentOS7 笔记 (一) .NETCore
安装系统CentOS,虚拟机好麻烦,直接在阿里云开了一个6个月免费的ECS. 熟悉Linux 基本命令 登录,exit,vi ,vim,vi保存关闭,w,ls,mkdir,df,ip addr,修改系 ...
- Git 基础教程 之 解决合并冲突
① 解决冲突 把Git合并失败的文件手动编辑成我们希望的内容 ② 提交,合并完成 场景: ① 新分支feature1,修改后,add, commit: ② 切回master后,修改后,add, ...
- 那么再会吧!OI!(HNOI2019退役记)
现在是4月7号7点. 退役了. 至此,整个LSOI17届全部毕业. 想说些什么呢?不知道啊. day1紧张过头,真正开始了解题意是在11点以后.半路忘了kmp怎么打,第一题计算几何根本没管,好啊,第三 ...
- [bzoj2242][Sdoi2011]计算器_exgcd_BSGS
计算器 bzoj-2242 Sdoi-2011 题目大意:裸题,支持快速幂.扩展gcd.拔山盖世 注释:所有数据保证int,10组数据. 想法:裸题,就是注意一下exgcd别敲错... ... 最后, ...
- POJ 3537
利用后继节点的SG值求出当前的SG值. 在当前任意一个BLANK插入一个x后,分成两段,于是,看成两段的NIM,异或和,按SG的定义求出当前的SG值即可. #include <iostream& ...