csspress
This commit is contained in:
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1">
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>年龄</th>
|
||||
<th>性别</th>
|
||||
<th>班级</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>asd</td>
|
||||
<td>14</td>
|
||||
<td>男</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lily</td>
|
||||
<td>12</td>
|
||||
<td>女</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>asd</td>
|
||||
<td>14</td>
|
||||
<td>男</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lily</td>
|
||||
<td>12</td>
|
||||
<td>女</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -21,6 +21,7 @@ html（HyperText Markup Language --超文本标记语言），不是一个编
|
||||
<html>
|
||||
<head>
|
||||
<title>Document</title>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
@@ -30,10 +31,11 @@ html（HyperText Markup Language --超文本标记语言），不是一个编
|
||||
> 在解读上面的代码之前，我们先来看这些由<(左尖括号), 内容 , >(右尖括号) 组成的内容，这些内容叫做标签（tag）, 在html中用<> 把他们包裹起来是为了与其他纯文本内容进行区分
|
||||
|
||||
> <!DOCTYPE html> 是Document Type Declaration 的简称，用来声明文档，也就是告诉浏览器当前使用的是哪种HTML
|
||||
> <html></html> 表示页面编写的都是HTML代码，必须成对出现，除了文档生命之外的所有代码都必须写在<html></html>中间
|
||||
><head></head> 表示页面的头部，页面的标题（title标签），meta元信息定义，文档样式表和脚本等信息 一般写在head 中间
|
||||
>
|
||||
><body></body> 表示页面的身体 页面内容需要写在 body 标签内 --
|
||||
> <html></html> 表示页面编写的都是HTML代码，必须成对出现，除了文档生命之外的所有代码都必须写在<html></html>中间
|
||||
> <head></head> 表示页面的头部，页面的标题（title标签），meta元信息定义，文档样式表和脚本等信息 一般写在head 中间
|
||||
> <body></body> 表示页面的身体 页面内容需要写在 body 标签内 --
|
||||
>
|
||||
> <meta charset="utf-8" /> 设置文档使用utf-8编码集
|
||||
|
||||
### 写第一个网页 --hello world
|
||||
|
||||
@@ -42,6 +44,7 @@ html（HyperText Markup Language --超文本标记语言），不是一个编
|
||||
<html>
|
||||
<head>
|
||||
<title>第一个页面</title>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
hello world
|
||||
@@ -60,12 +63,178 @@ html（HyperText Markup Language --超文本标记语言），不是一个编
|
||||
hello world
|
||||
</body>
|
||||
</html>
|
||||
|
||||
### 元素
|
||||
|
||||
#### 元素结构：
|
||||
|
||||
```
|
||||
<p>hello world</p>
|
||||
```
|
||||
|
||||
|
||||
|
||||
元素分类：
|
||||
|
||||
分类方式：
|
||||
|
||||
- 有无闭合标签
|
||||
- 单标签
|
||||
- 没有闭合标签，单标签书写形式以 / 结尾 如：<img /> <input /> ...
|
||||
|
||||
- 双标签
|
||||
|
||||
- 由 开始标签和结束标签组成，开始标签和结束标签必须成对出现
|
||||
|
||||
如：
|
||||
|
||||
```
|
||||
<p>这是段落标签</p>
|
||||
<span>这是文本标签 </span>
|
||||
```
|
||||
|
||||
|
||||
|
||||
- 块级元素和内联元素
|
||||
|
||||
- 块级标签：在页面中以块的形式展现——相对于其前面的内容他会出现在新的一行，其后面的内容也会被挤到下一行展现。一个块级元素不会被嵌套进内联元素中，但可以嵌套在其他块级元素。
|
||||
|
||||
```
|
||||
如下：
|
||||
<div></div>
|
||||
<ul></ul> (ul li , ol li)
|
||||
<table></table> (table tr td ...)
|
||||
...
|
||||
```
|
||||
|
||||
|
||||
|
||||
- 内联元素：内联元素不会导致换行，通常是在块级元素中并环绕内容的一部分。
|
||||
|
||||
```
|
||||
<span></span>
|
||||
<em></em>
|
||||
<i></i>
|
||||
<a></a>
|
||||
....
|
||||
```
|
||||
|
||||
- 空元素
|
||||
|
||||
定义：没有元素内容的html元素，空元素在开始标签中关闭。即开始标签到结束标签之间没有内容而且是单标签。
|
||||
|
||||
常见的空元素有：
|
||||
|
||||
```
|
||||
<br /> , <hr /> , <input />,<link />, <meta />
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 属性
|
||||
|
||||
属性包含元素的额外信息，这些信息不会出现在实际内容中。
|
||||
|
||||
一个属性需要包含如下内容：
|
||||
|
||||
> 1.一个空格，位于元素名称和属性名称之间
|
||||
>
|
||||
> 2. 属性名称，后面跟着一个等于号（=）
|
||||
> 3. 一个属性值，用“” 包裹
|
||||
|
||||
如之前写的 hello world 示例， 加工后如下：
|
||||
|
||||
```
|
||||
<p class="greet">hello world</p>
|
||||
```
|
||||
|
||||
这里的class 属性给元素赋了个可以识别的名字（greet） , 这个名字以后可以用来识别此元素的样式信息和其他信息。
|
||||
|
||||
练习：
|
||||
|
||||
把上面的hello world 的段落标签改成a标签，并添加相关的属性
|
||||
|
||||
> a标签相关属性：
|
||||
>
|
||||
> - href 声明超链接的web地址
|
||||
>
|
||||
> - title 鼠标悬停在超链接上时 显示的文字
|
||||
>
|
||||
> - target 指定新链接地址从哪里打开 默认从当前页面打开 , 如果想在新页面打开链接地址，需要把target的值写成_blank
|
||||
>
|
||||
> 即 target="_blank"
|
||||
|
||||
|
||||
|
||||
### 布尔属性
|
||||
|
||||
布尔属性即只能有跟他的属性名一样的属性值，看起来是没有属性值得属性 但是这是合法的
|
||||
|
||||
如： disabled 使表单元素中的控件为不可用 输入框和选择框变灰色 禁止输入和选择
|
||||
|
||||
```
|
||||
<input type="text" disabled="disabled">
|
||||
```
|
||||
|
||||
也可以省略写法为：
|
||||
|
||||
```
|
||||
<input type="text" disabled>
|
||||
```
|
||||
|
||||
#### 单引号和双引号
|
||||
|
||||
目前为止，所有的属性都是由双引号包裹里起来的，当然也可以使用单引号包裹。
|
||||
|
||||
如下：
|
||||
|
||||
```
|
||||
<a href="www.baidu.com">baidu</a>
|
||||
```
|
||||
|
||||
```
|
||||
<a href='www.baidu.com'>baidu</a>
|
||||
```
|
||||
|
||||
这两种写法都是正确的
|
||||
|
||||
|
||||
|
||||
但是 单引号和双引号不能在同一个属性中混用， 也就是在一个标签中引号只能使用一种
|
||||
|
||||
```
|
||||
<a href="www.baidu.com'>baidu</a>
|
||||
```
|
||||
|
||||
上面这种写法是错误的！！！！！
|
||||
|
||||
|
||||
|
||||
### html 中的特殊字符
|
||||
|
||||
无论在html 文件中使用多少个空格（包括回车换行），在浏览器渲染时会将连续的空白字符减少为一个空格符
|
||||
|
||||
代码格式：
|
||||
|
||||
在html代码中，我们让每一个嵌套的元素以两个空格缩进，
|
||||
|
||||
```
|
||||
原意字符 等价字符引用
|
||||
< <
|
||||
> >
|
||||
'' "
|
||||
' &apos
|
||||
& &
|
||||
```
|
||||
|
||||
|
||||
|
||||
### html 注释
|
||||
|
||||
<!-- 注释内容 -->
|
||||
|
||||
```
|
||||
<p>我在注释外！</p>
|
||||
|
||||
<!-- <p>我在注释内！</p> -->
|
||||
```
|
||||
|
||||
|
||||
134
htmlpress/表格.md
Normal file
134
htmlpress/表格.md
Normal file
@@ -0,0 +1,134 @@
|
||||
# 表格（table）
|
||||
|
||||
表格：由行和列组成的结构化数据集（表格数据）
|
||||
|
||||
### 使用场景
|
||||
|
||||
html表格应用于展示表格数据，而不是用来实现网页布局
|
||||
|
||||
用表格实现网页布局出现的问题：
|
||||
|
||||
1. 表格布局减少了视觉受损的用户的可访问性
|
||||
2. 表格会产生更多的标签，使代码变得更难于编写，维护，调试
|
||||
3. 表格不能自动响应 正确的布局容器（如div ） 他们的默认宽度是父元素的100% 但表格的默认大小是根据其内容而定的。因此 如果要做移动端适配，就需要采取额外的措施来改变表格的样式
|
||||
|
||||
### 新建一个表格
|
||||
|
||||
1. 每个表格的内容都被包含在<table></table> 中 而且这些内容需要写在html结构的body部分
|
||||
2. 在表格中，最小的内容容器是单元格，是通过（td）创建的 这是一列
|
||||
3. 如果想换行，需要把位于同一行的内容包含在 一个tr 标签中 即用<tr></tr> 定义一行
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1">
|
||||
<tr>
|
||||
<td>姓名</td>
|
||||
<td>年龄</td>
|
||||
<td>性别</td>
|
||||
<td>班级</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>asd</td>
|
||||
<td>14</td>
|
||||
<td>男</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lily</td>
|
||||
<td>12</td>
|
||||
<td>女</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>asd</td>
|
||||
<td>14</td>
|
||||
<td>男</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lily</td>
|
||||
<td>12</td>
|
||||
<td>女</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
上面的代码中出现的 <table border="1"></table> 中的border 用于给表格加上边框
|
||||
|
||||
|
||||
|
||||
#### 表格表头（th）
|
||||
|
||||
table包裹的 th标签会有加粗的效果 看起来是表格的表头
|
||||
|
||||
把上面表格的顶部四个单元格做成表头效果：
|
||||
|
||||
```
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<table border="1">
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>年龄</th>
|
||||
<th>性别</th>
|
||||
<th>班级</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>asd</td>
|
||||
<td>14</td>
|
||||
<td>男</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lily</td>
|
||||
<td>12</td>
|
||||
<td>女</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>asd</td>
|
||||
<td>14</td>
|
||||
<td>男</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>lily</td>
|
||||
<td>12</td>
|
||||
<td>女</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 允许单元格跨行或列
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user