html基础知识整理

时间  2019-11-12
标签 html 基础 知识 整理 栏目 HTML 繁體版
原文   原文链接

HTML

1.互联网原理：上网即请求数据php

1.1 html:超文本标记语言css

1.2服务器做用：存储数据html

1.3浏览器做用：接收和发送http请求浏览器

1.4 http:超文本传输协议服务器

html骨架：《html>ide

            <head>配置HTML页面</head>布局

            《body》书写网页内容《/body>学习

          </html>测试

DTD：文档定义类型ui

DTD做用：说明使用的html是哪种规范

html标签：

    Head:配置html页面

title：标题

meta: 配置字符集

body: 书写网页内容

小测试：h1标签他的用做？

标明语义，加粗是css完成的

html语法：对换行，空格,缩进不敏感，对嵌套敏感

          标签之间有空白折叠现象

标签语法：

标签通常是成对出现，单标签除外

标签名必须用一对加括号包裹

结束标签要书写关闭符号

标签分类：

 文本标签：p  span  input img  b  u  i  a 

 容器级标签：div  ul  ol  li  h1

 

标签属性：   key=”value” 

<h1></h1>

<p></P>

<a href=”” targrt=”-blank” title=””>超连接</a>

<img src=”图片路径” alt=”加载失败显示的内容” title=”鼠标悬停显示的内容”/>

路径： 

相对路径：相对与网页的路径

          同级查找：图片名.后缀名

          子级查找：images/图片名.后缀名

          上级查找:../images/图片名.后缀名

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML

1、div+css布局

绝大部分网页布局都是div+css布局。

优势：结构和样式分离，偏于代码的维护

结构及样式以下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
<style type="text/css">
/*清除默认样式*/
* {
padding: 0px;
margin: 0px;
}
.header {
width: 100%;
height: 100px;
background-color: #eee;
}
.logo {
float: left;
width: 200px;
height: 100px;
background-color: red;
}
.nav {
float: right;
width: 600px;
height: 100px;
background-color: red;
}

.content {
width: 100%;
height: 500px;
background-color: #eee;
margin-top: 30px;
}
.aside {
float: left;
width: 300px;
height: 500px;
background-color: green;
}
.main {
float: right;
width: 600px;
height: 500px;
background-color: green;
}
.footer {
width: 100%;
height: 100px;
background-color: #eee;
margin-top: 30px;
}
</style>
</head>
<body>
<!--结构-->
<!--header头部-->
<div class="header">
<div class="logo">logo</div>
<div class="nav"">导航栏</div>
</div>
<!--content内容-->
<div class="content">
<div class="aside">aside侧边栏</div>
<div class="main">main内容</div>
</div>
<!--footer尾部-->
<div class="footer" > footer</div>
</body>
</html>

2、列表

列表有3种：ul无序列表，ol有序列表，dl自定义列表

列表：相相似，相近的内容使用列表语义

2.1无序列表

做用：给文本添加无序列的语义

ul:unordered list

li:  list item 

ul是容器级标签，li也是容器级标签，内部能够书写任何标签，甚至能够书写ul>li 

ul内部能够嵌套一个或者多个li标签，li之间没有前后顺序

无序列表前面的小圆点，样式是css设置。

1 list-style: square;

 

2.2 有序列表

做用：给文本添加有序列表的语义

ol:ordered list

li:list item

Ol>li

规则：

每个列表项之间有顺序之分

ol,li也是一组成对出现的标签，ol必定嵌套li。

ol内部嵌套一个或者多个Li 

ol,li都是容器级标签，ol内部只能书写Li，li是容器级能够书写任何内容 

有序列表前面的数字，css设置

1 list-style: none;/*清除数字*/

 

2.3 自定义列表

做用：给文本添加自定义列表语义

dl: definition list

dt: definition title

dd: definition description

Dl>dt>dd

 

dl嵌套dt和dd，dt和dd是同级关系，dt是标题，dd是对标题解释说明（dl>dt+dd）

 

dl，dt,dd都是容器级标签

dl内部书写dt和dd，能够书写多组dt和dd,dd是对dt解释说明，dd能够有多条也能够没有。

通常咱们在使用dl时，只嵌套一组dt和dd，便于样式书写。

结构：

1 <!-- 通常一个dl嵌套一组dt和dd -->

2 <dl>

3  <!-- 标题 -->

4  <dt>苹果公司</dt>

5  <dd>苹果是美国公司</dd>

6  <dd>苹果公司收益不少</dd>

7 </dl>

8 

9 <dl>

10  <!-- 标题 -->

11  <dt>华为公司</dt>

12  <dd>华为总部在深圳</dd>

13  <dd>是国内很好的公司</dd>

14 </dl>

15 

16 

17 <dl>

18  <dt>小米公司</dt>

19  <!-- dt也能够没有dd，表示没有解释说明 -->

20 </dl>

 

样式：

1 <style type="text/css">

2  dl {

3  float: left;

4  width: 300px;

5  height: 400px;

6 

7  margin-left: 30px;

8  }

9 </style>

 

 

3、表格

3.1 基础表格

table: 表格

tr: 行

td: 单元格

关系：

table > tr > td

 

最简单表格：每一行单元格个数相同

1 <table>

2  <tr>

3  <td>第1行第1个单元格</td>

4  <td>第1行第2个单元格</td>

5  <td>第1行第3个单元格</td>

6  </tr>

7  <tr>

8  <td>第2行第1个单元格</td>

9  <td>第2行第2个单元格</td>

10  <td>第2行第3个单元格</td>

11  </tr>

12  <tr>

13  <td>第3行第1个单元格</td>

14  <td>第3行第2个单元格</td>

15  <td>第3行第3个单元格</td>

16  </tr>

17 </table>

 

 

若是表格有表头的概念？？？

 td替换成th便可

 

3.2 合并单元格

单元格合并利用td（th）两个属性

跨行合并colspan

 列合并rowspan

属性值：是数字合并几行（列）就书写几，没有单位

1 <table>

2  <tr>

3  <td colspan="2">1</td>

4  <td>2</td>

5  <td>3</td>

6  </tr>

7  <tr>

8  <td>4</td>

9  <td rowspan="2">5</td>

10  <td colspan="2">6</td>

11  </tr>

12  <tr>

13  <td>7</td>

14  <td>8</td>

15  <td>9</td>

16  </tr>

17 </table>

 

 

3.3 三个划分区域的语义标签

标题caption

 表头区域thead

表格主体tbody

关系：table>caption+(thead>tr>th)+(tbody>tr>td)

 

1 <table>

2  <!-- 标题 -->

3  <caption>人员名单</caption>

4  <!-- 表头 -->

5  <thead>

6  <tr>

7  <th>姓名</th>

8  <th>性别</th>

9  <th>年龄</th>

10  </tr>

11  </thead>

12  <!-- 主体部分 -->

13  <tbody>

14  <tr>

15  <td>小明</td>

16  <td>男</td>

17  <td>20</td>

18  </tr>

19  <tr>

20  <td>小明</td>

21  <td>男</td>

22  <td>20</td>

23  </tr>

24  <tr>

25  <td>小明</td>

26  <td>男</td>

27  <td>20</td>

28  </tr>

29  <tr>

30  <td>小明</td>

31  <td>男</td>

32  <td>20</td>

33  </tr>

34  </tbody>

35 </table>

 

 

4、表单

4.1 form标签

将全部的表单元素都书写在form标签内部

form标签是功能标签不是结构标签

提交位置：action

提交方式：method

1 <form action="1.php" method="get"></form>

 

表单元素：提供给用户进行输入或者选择控件

属性：type，根据type属性值，有不一样的表单类型

 

4.2 单行文本框

type: text

name: 名字

value: 默认值

1 请输入用户名：<input type="text" name="yonghuming" value="用户名" />

 

4.3 密码框

Type：password

1 密码：<input type="password" name=""mima" />

 

4.4 单选框

type属性值：radio

规则：同一组单选框，必须有相同的name名

表单被选中ckeched

1 <p>

2  请选择性别：

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

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

5 </p>

 

 

4.5 label标签

做用：能够绑定单选框

1 请选择性别：

2 <input type="radio" name="sex" id="nan" /><label for="nan">男性</label>

3 <input type="radio" name="sex" id="nv" checked="checked" /><label for="nv">女性</label>

 

4.6 复选框

type属性值：checkbox

规则：

1 <p>

2  请选择爱好：

3  <input type="checkbox" name="fav" id="study" checked="checked" /><label for="study">学习</label>

4  <input type="checkbox" name="fav" id="sing" /><label for="sing">唱歌</label>

5 </p>

 

 

4.7 按钮

三种按钮：

普通按钮： button

提交按钮：submit

重置按钮：reset(将用户输入清空)

1 普通按钮：<input type="button" value="按钮" />

2 提交按钮：<input type="submit" value="当即注册" />

3 重置按钮：<input type="reset" />

 

<a>标签能够模拟按钮

4.8 文本域

textarea:文本域 是双标签

也能够书写默认文本，在标签中间

1 <textarea name="" id="" cols="30" rows="10">请书写意见或者建议</textarea>

 

 

4.9 下拉框

Select>option

1 请选择你喜欢的城市：

2 <select name="city" id="city">

3  <!-- value提交值 -->

4  <option value="01">北京</option>

5  <option value="02" selected="selected">上海</option>

6  <option value="03">深圳</option>

7  <option value="04">广州</option>

</select>

 通常咱们使用无序列表模拟下拉框

5、html杂项

5.1 注释

快捷键：ctrl + /

特色：注释不会渲染在浏览器页面中

做用：通常标注某个结构开始，结束,或者不显示浏览器中的代码能够添加注释

1 <!-- 注释 -->

 

5.2 字符实体

字符实体（转义字符）：一些有特殊功能符号，直接书写在代码在浏览器渲染时不能正常显示咱们想要的效果

 

语法：

1 &关键字;

 

1 空格： &nbsp;

2 大于号：>&gt;

3 小于号：<&lt;

4 版权信息：©&copy

 

5.3 废弃标签

b,u,i,em,strong经常使用作小钩子（文本级标签）

b: 默认加粗

u: 默认下划线

i: 默认倾斜

em: 语义增强，倾斜

strong: 语义增强，加粗

 

5.4 色值表示法

单词表示法：

1 red,lightblue

 

十六进制表示法：#

1 color: #db9408;

 

rgb(,,)表示法

1 color: rgb(219,148,8);

 

总结：

无序列表：ul>li

有序列表：ol>li

自定义列表：dl>dt+dd

 

表格：

table > caption + (thead > tr >th)+( tbody > tr > td)

单元格合并：属性值数字

rowspan:

colspan:

 

表单：

4 <form action="">

5  单行文本框：<input type="text" value="默认文本" />

6  密码框：<input type="password" />

7  单选框：<input type="radio" name="" checked="checked" value="同一组单选框必须设置相同的name属性值" />  <lable for=”id名”>

8  复选框：<input type="checkbox" name="" checked="checked"  value="同一组复选框必须设置相同的name属性值" />

9  按钮：<input type="button" />

10  提交：<input type="submit" />

11  重置：<input type="reset" />

12  文本域：<textarea name="" id="" cols="30" rows="10"></textarea>

13  下拉框：<select name="" id="">

14  <option value=""></option>

15  </select>

16 </form>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程