html

2019-04-06 本文已影响0人十六只猴子王

超文本编辑语言
超文本：超出文本的范畴
标记：html所有的操作都是标记，标记就是标签<标签名称>
网页语言：

<html>
  <head>
     <title>这是一个标签</title>
  </head>
  <body>
  <font size ="5" color="red">第一个html程序!</font>
  <br/>
  这是一第一个html程序2！
  </body>
</html>

html的规范：
1.一个html文件开始标签和结束的标签<html></html>
定义一个java方法{}
2.html包含两部分内容
<head>设置相关信息</head>
<body>现实在页面上的内容都写在body里面</body>
3.html的标签有开始标签，也有结束标签
<head></head>
4.html的代码不区分大小写
5.有些标签，没有结束标签
比如换行<br /> <hr />

html中常用的标签：

文字标签和注释标签：

<font><font/>
属性：
size：文字的大小，取值范围1-7，超出了默认还是7
color：文字颜色
两种表示方式
英文单词：red green
使用十六进制数表示：#ffffff：RGB
-注释标签：
java的注释三种：
html中的注释：

标题标签、水平线标签和特殊字符

标题标签
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
从h1-h6，大小依次变小，同时回自动换行
水平线标签

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

size：水平线的粗细，取值1-7
color：颜色

特殊字符

<:&lt;
>:&gt;
空格：&nbsp;
&:&amp;
双引号"：&quot;

列表标签

定义列表：

<dl>
  <dt>软件工程</dt>
  <dd>1701</dd>
  <dd>1701</dd>
  <dd>1701</dd>
</dl>

有序列表
属性type：设置排序方式1（默认方式）a i

<ol type="a">
  <li>1701</li>
  <li>1702</li>
  <li>1703</li>
<ol/>

无序列表
<ul><ul/>:表示无序列表的范围
属性：type：空心圆circle、实心圆disc、实心方块square、默认disc

<ul type="square">
  <li>1701</li>
  <li>1702</li>
  <li>1703</li>
</ul>

图像标签

<img src="图片的路径"/>
scr:图片的路径
width：图片的宽度
height：图片的高度
alt：图片上显示的文字，把鼠标移到图片上，停留片刻显示的内容，有些浏览器不显示
绝对路径：
绝对路径是指完整的网址，假设图一中项目的网站域名为www.test.com，那么000.css的绝对路径应该是
https://www.test.com/HelloHBuilder/html/css/css1/000.css。
相对路径：
是从当前路径开始的路径
c:\Users\asus\Desktop\0412\day01\code\4.html
c:\Users\asus\Desktop\0412\day01\c.png
html文件所在的目录和图片是一个目录
图片和html文件是什么关系？
图片html的所在目录的上层目录day01
表示上层路径../
../:day01
../c.png

超链接

<a href ="链接到资源的路径">显示在页面上内容</a>
href：链接的资源的地址
target：设置打开的方式，默认是在当前页打开
——blank：在一个新的窗口打开
——self：在当前页打开默认

当超链接不需要到任何地址是，在href里面加#
<a href="#">这是一个超链接</a>
定位资源
定义一个位置：
<a name="top">顶部</a>
回到顶部:
<a href="#top">回到顶部</a>
原样输出：<pre></pre>

表格标签（重要的标签）

可以对数据进行格式化，是数据显示更加清晰

<table></table>:表示表格的范围
border:表格线
bordercolor：表格线的颜色
cellspacing:单元格直接的距离
width：表格的宽度
heigh：表格的高度
在table里面<tr></tr>
-设置对其方式 align：left
在tr里面<td></td>
使用th也可以表示单元格
-表示可以实现居中和加粗

<table border="1" bordercolor = "blue" cellspacing= "0" width = "200" height= "150">
</table>

画图分析表格的写法
首先定义一个表格的范围使用table
定义一行使用tr
定义一个单元格用td
操作技巧
首先数有多少行，数每行里面有多少单元格
表格的标题
<caption></caption>
合并单元格
-rowspan:跨行
-colspan:跨列

<td copsan = "3" > 人员信息</td>

表单标签

在输入项中必须有一个name的属性
可以提交数据，这个过程可以使用表单标签来实现
<form></form>:定义一个表单标签
- action:提交到的地址，默认条道当前的页面
- method：表单提及方式
  常用的有get和post方法
  post与 get的区别
  1.get请求地址栏会携带提交的数据，post不会携带
  2.get方法请求安全较低，post较高
  3.get 请求数据大小有限制，post没有限制
enctype：做文件上传的时候需要这样的属性
输入项：可以输入内容，可以选择内容的部分
大部分的输入项可以使用<input type="输入项的类型"/>
1. 普通的输入项：<input type = "text"/>
2. 密码输入项：<input type = "password"/>
3. 单选输入项：<input type = "radio"/>
  需要属性：name属性,name的属性值必须相同
- 实现默认选中：checked = "checked"
1. 复选输入项：<input type = "checkbox"/>
  需要属性：name属性,name的属性值必须相同，必须有一个value的值
- 实现默认选中：checked = "checked"
1. 文件输入项（文件的上传）:<input type = "file"/>
2. 下拉输入项（不再input标签里面)

<select name = "birth">
 <option value="1991">1991</option>
 <option value="1991">1991</option>
 <option value="1991">1991</option>
</select>

默认选中：selected = "selected"

文本域：<textarea cols="10" rows= "10"></textarea>
隐藏项（不会出现在页面上，但是存在于html代码里买>
<input type="hidden"/>
提交按钮
<input type = "submit" value = "注册"/>

使用图片来提交
<input type = "image" src ="图片地址"/>
重制按钮：<input type = "reset" value = "重制注册"/>
回到输入项的初始状态
普通按钮：<input type ="button" value ="普通按钮"/>

html中其他常用标签的使用
b:加粗
u:删除线
I:下划线
s:斜体
pre:原样输出
sub：下标
sup：上标
p：段落标签，比br多一行
div：自动换行
span：在一行显示

html的头标签的使用

html两部分组成 head 和body
- 在head里面的标签就是头标签
- title标签：表示在标签上显示的内容
- <meta>标签：设置页面的一些相关内容
  <meta name= "keywords" content = "搜索内容">
  <meta http-euqiv= "refresh" content = "3;url=网站名"/>
  三秒钟后实现自动跳转
- base标签：设置超链接的设置
  可以统一设置超链接的打开方式
  <base target="_blank"/>
- link标签：引入外部文件

框架标签的使用

<frameset>
rows:按照行进行划分
<frameset rows ="80,">
cols:按照l列进行划分
<frameset cols="80,">
<frame>
<frame name = "lower_left" src =" 网页路径">
使用框架标签时候，不能写在body里面，使用了框架标签，需要把body去掉

<frameset rows = "80,*">//把页面划分成两部分
  <frame name = "top" src ="a.html">//上面页面
  <frameset cols="150,*">//把下面的部分分成两个页面
    <frame name = "lower_left" src ="b.html">//左边的页面
    <frame name = "lower_right" src = "c.html>//右边的页面
   </frameset>
</frameset>

//如果在左边的页面超链接，想再右边的部分显示内容可以将超链接的属性taget设置成名称
<a href = "01-hello.html" target="lower_right">超链接1</a>

html

图像标签

超链接

表格标签（重要的标签）

表单标签

猜你喜欢

热点阅读