<html>:做网页,是一种超文本标记语言。

　　　　超文本：既有添加文本的能力，还可以添加图片，视频等多媒体元素。

　　　　标记：由标签组成。不同的标签有不同的效果。

　　       开始标签，结束标签。 如：张三开始 - 张三结束。

<title>:标题内容</title>是整个网页的标题标签。

html导入外部资源

　　　　相对路径

　　　　　　相对当前页面的位置，去寻找另外一个资源

　　　　　　./  当前目录

　　　　　　../  上一级目录

　　　　　　../../ 上二级目录

　　　　绝色路径

　　　　　　从网站根目录寻找另外一个资源

<!-------------------------------------------------------------------------------------------->

<!doctype html><!--文档声明，告诉浏览器以什么样的标准来解析该网页-->

<html><!--根标签的开始-->

<head><!--头部标签的开始-->

<meta charset="utf-8"><!--设置网页的编码，设置UTF-8,可防止中文乱码-->

<title>我的第一个html文件</title><!--设置网页的 标题-->

</head><!--头部标签的结束-->

<body><!--身体标签的开始-->

hello阿萨德

</body><!--身体标签的结束-->

</html><!--根标签的结束-->

<!-------------------------------------------------------------------------------------------->

1.常用的标签

 

l 标题标签字体加粗  h1~h6 字体逐渐变小，自动换行  

换行标签   <br/>

标尺线标签  <hr/>    /  可以省略  <hr>

marquee 弹幕效果

direction  方向  

left(左)  right（右） up（上） down（下）

scrollamount  设置速度，值越大，越快

behavior  

scroll(循环滚动)

slide 一次，走完即停

alternate  交替滚动（来回滚动）

height  设置高度

加粗  strong   b

斜体  i  em

图像标签 img

src 图片的路径(相对路径和绝对路径)

title  鼠标悬浮在图片上显示的内容

alt  图片无法加载时，显示的内容

<!-------------------------------------------------------------------------------------------->

2.单标签和双标签

单标签:单独一个标签  比如<br>…

双标签：成对存在的，比如<h1></h1>…

<!-------------------------------------------------------------------------------------------->

3.相对路径和绝对路径

./是同级
../是去上一级
../images/a1.jpg,去当前文件的上一级寻找名字为images的文件夹,再到images文件夹下面寻找a.jpg

<!-------------------------------------------------------------------------------------------->

4.超链接  a

<a href="http://www.baidu.com" target="_blank"> 点击</a>

href：设置要打开的链接

target：设置在何处打开

   _self:在本窗口打开

   _blank:在新窗口打开

       还可在iframe中打开

   _top：回到顶部

<!-------------------------------------------------------------------------------------------->

5.转义字

&nbsp; 空格

&lt;    <

&gt;    >

&copy; ©版权符号

<!-------------------------------------------------------------------------------------------->

6.锚链接

定义一个锚点

<a name="mao">锚点位置</a>

跳到锚点位置

<a href="#mao">跳到锚点</a>

7.列表

有序列表

<ol type="I" start="2"> <!-- 定义一个有序列表 -->

<li>第1项</li><!-- 定义一个列表项 -->

<li>第2项</li>

<li>第3项</li>

<li>第4项</li>

<li>第5项</li>

</ol>

type：设置序号的类型   A  a  1  i  I

start:设置开始序号

无序列表

<!--disc黑点  circle圆  square黑方块 -->

<ul type="square">

<li>11</li>

<li>22</li>

<li>33</li>

<li>44</li>

</ul>

自定义列表

<dl>

<dt>张艺兴</dt>

<dd>是一个....</dd>

</dl>

dd相对于dt有缩进

<!-------------------------------------------------------------------------------------------->

8.P标签  

段落标签：自动换行，段前段后间隔比较大

<!-------------------------------------------------------------------------------------------->

9.行级标签、块级标签

行级标签：不会自动换行，设置宽高无效，比如：a ,strong

块级标签：会自动换行，可设置宽高  h1 ,  h2  , p

行内块：不会自动换行，可设置宽高  比如  img

<!-------------------------------------------------------------------------------------------->

10.表格table

行，列，单元格，边框，内容位置，合并

基本结构

<table border="1" width="400" height="400">

<tr>

<td align="left">11</td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

顺序：table>tr>td

tr：行

td :单元格

对一个td设置width,

那该列的width都是一样的（列宽）

对一个td设置height,

那该行的height都是一样的（行高）

和把height设置在tr上是一样的效果

align:

设置在td上，是设置该td内容的水平位置

left（左）,right（右）,center(中)

设置在tr上，是设置该tr里所有td内容的水平位置

valign:

设置在td上，是设置该td内容的垂直位置

top（上）,middle（中）,bottom(下)

设置在tr上，是设置该tr里所有td内容的垂直位置

cellspacing：设置单元格之间的距离

cellpadding：设置单元格内容与单元格之间的距离

colspan:跨列（左右合并）

   colspan=”n” 对应的该tr要删n-1个td

rowspan:跨行（上下合并）

   rowspan=“n”

对应的下n-1的每一行都要删除一个td

<!-------------------------------------------------------------------------------------------->

11. 表单元素

表单form:将前台填写的数据传到后台

<form action="http://www.taobao.com">

</form>

action:设置提交的地址

method：设置提交方式（post,get）

https://www.taobao.com/?user=zhangsan&pwd=123

文本输入框：

<input type="text" >

密码框

<input type="password" >

提交按钮

<input type="submit">

单选框

<input type="radio" name="sex">男

<input type="radio" name="sex">女

复选框

<input type="checkbox" name="love"> 看电影

<input type="checkbox" name="love"> 打球

<input type="checkbox" name="love"> 敲代码

下拉选择

<select name="stu" >

<option value="ben">本科</option>

<option value="yan">研究生</option>

<option value="bo">博士</option>

</select>

textarea  多行文本域

<textarea name=""  cols="30" rows="5" >

11111

</textarea>

图片提交按钮

<input type=“image” src=“路径”>

<input type=“submit”>

 

重置按钮

<input type="reset"><!-- 重置按钮，清空表单 -->

 

普通按钮

<input type="button" value="按钮">

 

文件选择

<input type="file"> 用于文件上传

 

隐藏域

<input type="hidden"> 在页面不展示


<!-------------------------------------------------------------------------------------------->

12.一些属性

placeholder  表单提示信息

readonly   只读

disable    不可用，不会提交

required  必填

hidden    隐藏

checked    单选、复选的默认选中

selected   下拉选择框的默认选中

<!-------------------------------------------------------------------------------------------->

13. 网页框架

iframe

<iframe width="500" height="500" src="http://www.taobao.com" frameborder="1"></iframe>

src=网页的路径

frameborder  边框

scrolling="no"  去掉滚动条   

      yes   加上滚动条

frameset

<frameset cols="25%,*">

<frame src="http://www.baidu.com"></frame>

<frame src="http://www.baidu.com"></frame>

</frameset>

Cols:将网页左右分割

Rows:将网页上下分割

 

两者对比

Iframe比frameset灵活，在使用frameset时需删除body,并且也不能添加其他的元素到网页中，而iframe可以，并且iframe可以嵌套在其他标签里，位置是任意的。推荐使用iframe.

<!-------------------------------------------------------------------------------------------->

14.标注

<input id="man" type="radio">

<label for="man">男</label>

<!-------------------------------没了233333--------------------------------------------->


随机推荐

  1. [Spring cloud 一步步实现广告系统] 13. 索引服务编码实现

    上一节我们分析了广告索引的维护有2种,全量索引加载和增量索引维护.因为广告检索是广告系统中最为重要的环节,大家一定要认真理解我们索引设计的思路,接下来我们来编码实现索引维护功能. 我们来定义一个接口, ...

  2. spring常用注解整理

    参看大佬博客https://www.cnblogs.com/xiaoxi/p/5935009.html

  3. PlayJava Day012

    今日所学: /* 2019.08.19开始学习,此为补档. */ JPanel和JFrame 1.JFrame是最底层,JPanel是置于其面上,同一个界面只有一个JFrame,一个JFrame可以放 ...

  4. Dynamics 365触发Microsoft Flow自动生成PDF并作为附件送邮件

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  5. 剑指offer 23：从上往下打印二叉树

    题目描述 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 解题思路 按照从左往右从上到下的顺序打印节点,需要我们维护一个队列,这个队列放入元素的顺序是访问队头节点(起始先放入根节点),则若当前 ...

  6. Spring Boot 2 + Thymeleaf：表单字段绑定、表单提交处理

    Spring Boot中Thymeleaf对表单处理的一些用法:(1)使用th:field属性:进行表单字段绑定(2)使用ids对象:一般用于lable配合radio或checkbox使用(3)表单提 ...

  7. [b0043] python 归纳 (二八)_python测试使用快速上手

    参考 Python必会的单元测试框架 —— unittest # -*- coding: utf-8 -*- """ 测试代码组织,整理( 非可执行) "&qu ...

  8. Playbook剧本小结

    1.Playbook剧本小结 1.什么是playbook,playbook翻译过来就是"剧本",那playbook组成如下 play: 定义的是主机的角色task: 定义的是具体执 ...

  9. ORACLE DATAGUARD 日志传输状态监控

    ORACLE DATAGUARD的主备库同步,主要是依靠日志传输到备库,备库应用日志或归档来实现.当主.备库间日志传输出现GAP,备库将不再与主库同步.因此需对日志传输状态进行监控,确保主.备库间日志 ...

  10. 设置API：wx.openSetting,wx.getSetting使用说明(示例：地图授权与取消授权后的重新授权)

    这个API解决了过去一个长久以来无法解决的问题,如何让用户重复授权: 打开小程序的设置界面:就是主动调取授权 目前资料极少,但是已经可以让大家先看看了: 官方文档地址:https://mp.weixi ...