HTML常用属性

最新推荐文章于 2023-08-25 10:34:40 发布

chuanlan9016

最新推荐文章于 2023-08-25 10:34:40 发布

阅读量183

点赞数

文章标签： java c# php

原文链接：https://my.oschina.net/saysuqi/blog/1154334

版权

1：HTML

Hyper Text Markup Language - 超文本标记语言。

W3c组织定义的一标准。

浏览器解析HTML。

2：HTML语法

1：文本文件，扩展名 *.html

2：语法的结构：都是元素- XML(用户自己定义的)

<html>

<head>

<title>标题用于显示到浏览器的头上</title>

</head>

<body>

<button>这是一个按扭</button>

<br>

</body>

</html>

3：使用HBuilder开发html

css是用于放样式表的。

img是用于放图片的。

Js 放用于放javascript的文件的。

Index.html 默认的主页。

4：学习HTML的元素

1：语法

（见2）

2：html的元素

<!DOCTYPE html> - 文档类型定义 - 约束。这种约束版本是HTML5

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

HTML4.0版本。

目前建议大家都使用HTML5的约束。

3：基本的元素

<!DOCTYPE html>

</head>

</body>

</html>

4：更多元素

1：层元素

Div - 层 - 一个div占一行。

p段

span块

<span style="background: blue;color: white;">Hello</span>

不会占一行

2：图片元素<img>

3：锚点元素 <a> 超连接元素

<a href="http://www.baidu.com">Baidu</a>

<br>

<a href="01.html">第一个页面</a>

4：嵌入的video

使用HTML4的标签 <embed>

HTML5的 <video> 约束必须是：<!DOCTYPE html>

</video>

5：表格

table{

border:1px solid black;

border-collapse: collapse;

width: 300px;

}

table td{

border:1px solid black;

padding: 5px;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

6：表单及表单标签

表单叫<form> 用于向后台如Java代码，PHP, C#提交交互数据的。

<form>表单不可见，提交数据时，提交的是里面的元素

<form>

里面写的是可以见的表单元素

</form>

1：表单元素与表单元素的属性

<form Method=”post | get “ 默认是get方式提交的数据url的后面

post提交的数据在表单的正文中

Action=”提交到哪儿去，提交的目的地”>

</form>

之所有与服务器如baidu.com的服务器进行交互，基于一个协议：

HTTP协议

两部分：

1：请求协议

格式：

请求首行 GET /资源?name=Jack HTTP/1.1版本

请求头 host:www.baidu.com:80

请求空行

请求正文对于get来说是没有正文的对于post来说 name=Jack

2：响应协议

格式：

响应首行 HTTP/1.1(版本) 200（状态码） OK(状态的文本)

响应头 content-type:text/html;charset=UTF-8 响应的格式

响应的空行

响应的正文 <html><body>Hello</body></html>

post与get的区别：

get请求：

<br>

</form>

请求的参数，都在地址中出现：

http://127.0.0.1:8020/20160910/01.html?name=Jack&pwd=1234

Post请求：

http://127.0.0.1:8020/20160910/01.html

2：表单里面的元素

1：<input type=”text”>文本元素

2:密码元< intput type=”password”/>

3:文文件元素

4：单选 type=”radio”

<input type="radio" name="sex" value="男"/>男性

<input type="radio" name="sex" value="女"/>女性

5：复选 type=”checkbox”

<input type="checkbox" name="hobby" value="football" />足球

<input type="checkbox" name="hobby" value="music" />音乐1

<input type="checkbox" name="hobby" value="mtv" />音乐

<input type="checkbox" name="hobby" value="climb" />爬山

6：下拉选择框 <select>

<option>可选项目。

</select>

可以对选择的项目进行分组：

<option>小学一年龄</option>

<option>小学二年级</option>

</optgroup>

</select>

7：文本域

8：两个按扭

1：提交按扭

<input type=”submit”/>只要一点这个按扭，则这个表单就是会将数据提交给后台的java代码。

2：清空按扭

3：按扭

7:其他的元素

1：b 粗体

2：font
<font style="font-size: 150px;">Hello</font>

3：i 斜体

4：列表元素

ol - ordered list 有序的列

ul - unordered list - 没有顺序的

li -- list item 列表的项目

<li>AAAAA</li>

<li>BBBBB</li>

<li>CCCCC</li>

<li>DDDDD</li>

<li>EEEEE</li>

</ol>

<li>AAAAA</li>

<li>BBBBB</li>

<li>CCCCC</li>

<li>DDDDD</li>

<li>EEEEE</li>

</ul>

5：pre预编译

<pre>

Helldod

asdf

asd

asdfasdf

asdfadf

</pre>

6：sub下标sup上标

3<sup>2</sup><!-- 3的2次方--!>

<br>

10<sub>log</sub>

5:样式表CSS

级联样式表。

可以对页面的元素，进行美化。

1：根据样式表声明的位置分为

1：行内样式 -最有效

2：内嵌样式表

input{

border: 1px solid blue;

border-radius: 5px;

padding: 3px;

}

</style>

</head>

<body>

</body>

3：导入样式表,外部的样式表-今后的样式表，都是这样的

</head>

<body>

</body>

以下是综合使用的情况：

input{

background: blue;

}

</style>

</head>

<body>

</body>

2：根据如何选择元素分为

1：元素样式表

/*元素样式表,对所有input元素，都使用这个样式*/

input {

border: 1px solid blue;

padding: 3px;

border-radius: 5px;

background: red;

}

</style>

</head>

<body>

<br>

</body>

2：id样式表

3：类选择器

.class{

....

}

3：通过上面的三种演化出一些层级的选择器

祖先：

/*只选择div里面的button*/

div button{

border: 1px solid blue;

color: blue;

}

只选择某个元素的子元素

/*只选择div里面的子button元素*/

div>button {

border: 1px solid blue;

color: blue;

}

4：伪类

!DOCTYPE html>

<html>

<head>

.div {

width: 300px;

height: 300px;

border: 1px solid red;

}

/*只选择div里面的子button元素*/

div>button {

border: 1px solid blue;

color: blue;

}

label{

background: green;

}

/*以:开始可以接收用户的事件叫伪类*/

label:hover{

background: yellow;

}

</style>

</head>

<body>

<label>Hello</label>

<span>

</span>

</div>

<button>外面的按扭</button>

</body>

</html>

6：表格

Border

Width

Heigth

Background

Padding 里面的元素距离边有多远

转载于:https://my.oschina.net/saysuqi/blog/1154334

chuanlan9016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML常用属性

1：HTML Hyper Text Markup Language - 超文本标记语言。 W3c组织定义的一标准。浏览器解析HTML。 2：HTML语法 1：文本文件，扩展名 *.html 2：语法的结构：都是元素- XML(用户自己...
复制链接

扫一扫