html基础

p段落标签

段落：英文段落，<p>标签中的p是paragraph的缩写。

属性：align（排列） = “属性值”；代表排列方式。属性值可以是：left（左对齐），center（居中），right（右对齐）。

<p>我是段落1</p>
<p align = "center">我是段落2</p>

p标签内，不能放块级标签。不要嵌套

标签div&span

<div>&<span>是非常重要的标签，学完前端课程你会发现，这两个标签的出场率是其它所有标签出场率之和的指数倍。

division（分割）

span(范围）

div	span
块级标签	内联标签
独占一行	不独占一行
有align属性	没有align属性

如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。

块级标签：

是个容器，什么都能放，包括自己
自动换行
可设置宽高
有align属性
常见块级标签：<div>、<h1> ~ <h6>、<p>、<hr>（水平线）、<br>、<ol>（有序列表）、<ul>（无序列表）等

行级标签（内联标签）：

是容器内的东西，不能放容器
不换行
没有宽高，宽高由内容撑起来
没有align属性
常见行级标签：<span>、<i>、<strong>、<img>、<a>

判断一个标签是块级还是行级主要依据：

是否独占一行
是否可以设置宽高
以上两条必须同时满足

br.hr.center

<br>强制换行（H5中已废弃）

<hr>一根分割线（H5中已废弃）

<center>居中显示（H5不建议使用）

预定义pre标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

<pre>
import socket


server = socket.socket()
server.bind(('127.0.0.1',8080))
server.listen(5)
conn, addr = server.accept()
msg = conn.recv(1024)
print(msg)  #
conn.send(b'HTTP/1.1 200 OK\r\n\r\n')  #如果想把浏览器作为客户端来访问该服务端，服务端与浏览器交互需要满足HTTP协议的规范，HTTP协议的详细内容会在Django基础讲解。
conn.send(b'OK')
conn.close()
server.close()
</pre>

pre示例

<body>内排版标签完毕。

超链接a标签

超链接形式：

外部链接：链接到外部文件。
锚链接：在本页面或者其他页面的的不同位置进行跳转。最常见的回到顶部。
邮件链接：点击之后会打开电脑自带的邮箱（电脑得带呀，不带点了没反应）。

外部链接：

<a href="new.html">点击进入到新网页</a>

<!--访问的是new.html这个文件-->

<a href="https://www.luffycity.com/" target="_blank">路飞学城</a>

<!--访问的是www.luffycity.com这个网站-->

锚链接：

指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。
首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。

<a name="top">顶部</a>
<pre>
    假设这里有100行字
    行数多到需要你用滚轮往下翻页
    本文章右下角的回到顶部点一下就回到本文章的顶部了
</pre>
<a href="#top">回到顶部</a>

邮件链接：

邮件链接非常的常见，在很多网站的最下边都会有邮件连接。

<a href="mailto:customer@luffycity.com">联系我们</a>

特殊属性值：

跳转到本页面的顶端：
```
<a href="#">跳转到顶部</a>
```
与JS相关
```
<a href="javascript:;">a标签不执行</a>
<a href="javascript:alert(1)">弹出框里边内容为：1</a>
```
href="javascript:;"　　在这里表示什么都不执行，这样点击<a>标签的时候就不会有任何反应。

　　　href=javascript:alert(1)　　是表示在触发<a>标签默认动作时，执行一段JavaScript代码。 alter（1）这个动作是在页面上弹出一个弹出框，弹出框内的内容为1。

其他属性：

href：目标（要跳转到的地方）
title：悬停文本（鼠标放上表面会显示出一个文本）
name：为a标签起一个名字，在a标签中主要为了设置锚点。
target：告诉浏览器这个链接用什么方式打开。
- _self:在同一个网页中显示（替代了原网页）。
- _blank:在新的窗口打开（体验好，所以被几乎所有的业务选择）。
- _parent:在父窗口打开。
- _top:在顶级窗口打开。

再次强调：a标签默认在原页面打开新的连接，设置target=“_blank”为最最最常用的操作。

a标签与p标签

a标签为行内标签，原则上不能嵌套块级标签p（也可能是其他的块级标签，这里以p举例）的，但是a标签可以嵌套块级标签，只不过被嵌套的块级标签内的任何一个文本被点击后都会进行跳转。

<a href="https://www.luffycity.com/">
    <p>p 标签 1</p>
    <div>div标签 2</div>
</a>

图片img标签

img标签是单身标签（自封闭标签），代表一张图片，行级标签。

img标签支持图片格式有：

　　jpg(jpeg)、gif、png、bmp

psd、ai格式的图片 img 标签不支持，插入这种类型的图片前先转换格式。

img 属性之 src

src链接的图片的路径

<img src="https://img2018.cnblogs.com/blog/1223699/201811/1223699-20181128164038560-1043708228.jpg" alt="葫芦兄弟">

<!--你复制上边的代码发现图片渲染不出来，别急，不是你写错了，是图片所有方不愿意被你引用，下面给上一个愿意被你引用的图片地址-->

<img src="https://hcdn1.luffycity.com/static/frontend/activity/banner-PC7%E5%A4%A9%20(1)_1542264332.6512344.png" alt="路飞学城">

既然是路径就会有相对路径和绝对路径

相对路径：

<!--当前目录下的01.png的两种写法-->
<img src="01.png" alt="">
<img src=".\01.png" alt="">
<!--上级目录下的01.png的写法-->
<img src="..\01.png" alt="">
<!--指定目录下的01.png的写法-->
<img src="指定目录\01.png" alt="">

网络（绝对）路径：

<img src="https://hcdn1.luffycity.com/static/frontend/index/banner11_1538122470.2779157.png" alt="">

img标签其他常用属性

width：宽度
height：高度
title：提示性文本，鼠标放在图片上时显示。
align：指定图片的对齐方式（left、right、center）
alt：当图片显示不出来的时候显示（一般用作提示：抱歉图片加载失败，请刷新）。

当你的文字迫不得已要跟图片写在一行的时候，你会发现文字在图片的最下边，如果想要居中怎么办？

是的给图片加align属性就好了。

body内列表标签

列表标签也是比较常用的排版标签，特别是在电商网站中很常见。

列表标签共有三种：无序列表、有序列表、定义列表。

ul 无序列表

无序列表非常的常用和好用，本博客中就用到了很多次无序列表。

代码及效果展示如下：

<ul>
    <li>老男孩教育</li>
    <li>Python学院</li>
    <li>Linux学院</li>
    <li>大数据学院</li>
    <li>Go语言学院</li>
</ul>

书写规范：

li不能单独存在，需要包裹在ul里才能显示出无序列表的效果。
ul目的是告诉浏览器我包裹的内容要渲染成无序列表，ul = unordered list（无序列表）
li里可以嵌套ul，li本身是个容器，容器就可以放下任何标签，但是不能单独的放一个自己。

type属性可以更改无序列表前的小圆点：

type = “disc” 实心圆（默认值）
type = “square” 实心方块
type = “circle” 空心圆

ol 有序列表

有序列表，不常用，书写规范和ul一致。

<ol>
    <li>老男孩教育</li>
    <li>Python学院</li>
    <li>Linux学院</li>
    <li>大数据学院</li>
    <li>Go语言学院</li>
</ol>

书写规范：

li不能单独存在，需要包裹在ul里才能显示出无序列表的效果。
ul目的是告诉浏览器我包裹的内容要渲染成无序列表，ul = unordered list（无序列表）
li里可以嵌套ul，li本身是个容器，容器就可以放下任何标签，但是不能单独的放一个自己。

type属性可以更改无序列表前的小圆点：

type = “disc” 实心圆（默认值）
type = “square” 实心方块
type = “circle” 空心圆

ol 有序列表

有序列表，不常用，书写规范和ul一致。

<ol>
    <li>老男孩教育</li>
    <li>Python学院</li>
    <li>Linux学院</li>
    <li>大数据学院</li>
    <li>Go语言学院</li>
</ol>

type属性可以更改序号的表示形式：

type = “1” 阿拉伯数字排序（默认）
type = “A” 字母顺序排序（可以是小写a）
type = “I” 罗马数字排序（可以是小写i）

start属性：

因为有序，所以可以定义从几开始

<ol start="2"><!--默认从1开始，设置了start="2"就从2开始-->

dl 定义列表

<dl>:definition list 定义列表

　　<dt>：definition title 列表的标题，通常是需要这个的。
　　<dd>：definition description 列表的描述，如果不需要它，可以没有。

书写规范：

dl 里只能有 dt 、dd
dt 、dd只能存在于 dl 里，不能单独出现

常用写法示例：

<dl>
    <dt>中国</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>
</dl>
<dl>
    <dt>IT</dt>
    <dd>老男孩教育</dd>
</dl>
<dl>
    <dt>China</dt>
    <dd>BeiJing</dd>
    <dd>Shanghai</dd>
    <dd>Shenzhen</dd>
    <dt>IT</dt>
    <dd>OldBoy</dd>
</dl>

定义列表dl示例代码

表格table标签

表格标签也是非常常用的标签。

生活中的一个表格（table）是由行（tr）和（td）列组成的。

但是在前端中一个表格（table）是由行（tr）组成，行（tr）是由单元格（td）组成。

<table>
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>爱好</td>
    </tr>
    <tr>
        <td>大娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>举重</td>
    </tr>
    <tr>
        <td>二娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>听、看</td>
    </tr>
    <tr>
        <td>三娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>扎自己，撞自己</td>
    </tr>
</table>

body标签示例

这个时候我们发现，这里的表格没有边框呀。别急，边框在表格的属性中可以设置。

table（表格）的属性：

border：边框单位是像素。

border-style:dotted solid double dashed; 点、线、双线、虚线

style="border-collapse:collapse;"：单元格的线与边框线合并。
width：宽度，单位是像素。
bordercolor：边框的颜色。
align：表格的水平对齐方式，属性值：left、right、center。
background：表格的背景图片。
bgcolor：表格的背景颜色。
cellpadding：单元格的文字距离四条边的距离，单位是像素，默认距离左边那条线的距离为0，如果想更改其默认距离右边的距离为0的话，设置属性dir="rtl"
cellspacing：单元格和单元格之间的距离，单位是像素，默认值为0。切记：若使用此属性，请删除 style="border-collapse:collapse;"。

带一些属性的代码及效果图：

<table  border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8" >

表格的行 tr

我们刚才说过前端中的表格（table）仅且只有行（tr）组成。

表格的行也具有自己的属性：

dir：决定此行单元格的排列方式，默认是从左到右（ltr），可更改为：从右到左（rtl）。
bgcolor：设置这一行的单元格的背景颜色。（tr没有background属性了，想要实现给这一行增加一个背景图片的效果，可以通过CSS来实现）。
height：行高。
align：本行水平对齐方式，可以是left、right、center
valign：本行的垂直对齐方式，可以是top、middle、bottom

表格的单元格 td

我们刚才说过前段中行（tr）中是单元格（td），没有列的概念。

单元格也具有自己的属性：

width：宽，单位像素/百分比，例如width="50%"指此列的所有单元格占整张表的50%宽度。
height：高，单位像素/百分比，例如height="50%"指此行的所有单元格占整张表的50%高度。
align：水平对齐方式，可以是left、right、center。
valign：垂直对齐方式，可以是top、middle、bottom。
bgcolor：背景颜色。
background：背景图片。

合并单元格

excel中的合并单元格就是把多个单元格合并成一个，在前段中合并单元格也是这样的。

单元格合并可以从一下两个方向出发（单元格的属性）：

colspan：横向合并，例如colspan="2"表示此单元格水平方向上要占据两个单元格。
rowspan：纵向合并，例如rowspan="2"表示此单元格垂直方向上要占据两个单元格。

代码及效果展示：

<table  border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8" >
    <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>爱好</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">大娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>举重</td>
    </tr>
    <tr>
        <td>二娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>听、看</td>
    </tr>
    <tr >
        <td width="50%" height="50%">三娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>扎自己，撞自己</td>
    </tr>
</table>

单元格合并代码示例

加粗版的单元格用th替代掉td即可（加粗的是单元格内的内容），其他属性与td一样，不需修改，且单元格内的内容会居中显示。

表格的<caption>、<thead>、<tbody>、<tfoot>

caption：表格的标题，与tr同级。

caption代码示例及效果：

<table  border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8" >
    <caption>葫芦兄弟信息表</caption>
    <tr>
        <th>姓名</th>
        <td>性别</td>
        <td>年龄</td>
        <td>爱好</td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">大娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>举重</td>
    </tr>
    <tr>
        <td>二娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>听、看</td>
    </tr>
    <tr >
        <td width="50%" height="50%">三娃</td>
        <td>不详</td>
        <td>不详</td>
        <td>扎自己，撞自己</td>
    </tr>
</table>

caption属性演示代码

thead、tbody、tfoot

thead：顾名思义，表格的头
tbody：顾名思义，表格的身子
tfoot：顾名思义，表格的脚

如果以这三个标签命名，在页面中渲染会先渲染thead，再渲染tbody，再渲染tfoot。

如果有重复的thead、tbody、tfoot的话，则按会按照先头再身子再脚的情况显示，多个头则按先后顺序显示头。

当表格内容非常大、非常多的时候，用thead、tbody、tfoot这种方式排版，数据就可以一边获取一边渲染，如果不，则等数据全部加载完再显示整个表格。

代码及效果演示：

<table border="10px" cellspacing="10px" width="500px" height="500" bordercolor="#836FFF" bgcolor="#EEA9B8">
    <caption>葫芦兄弟信息表</caption>
    <tfoot>
    <td width="50%" height="50%">三娃</td>
    <td>不详</td>
    <td>不详</td>
    <td>扎自己，撞自己</td>
    </tfoot>
    <thead>
    <th>姓名</th>
    <td>性别</td>
    <td>年龄</td>
    <td>爱好</td>
    </thead>
    <tbody>
    <td>二娃</td>
    <td>不详</td>
    <td>不详</td>
    <td>听、看</td>
    </tbody>
    <tbody>
    <td colspan="2" rowspan="2">大娃</td>
    <td>不详</td>
    <td>不详</td>
    <td>举重</td>
    </tbody>

</table>

thead,tbody,tfoot代码演示

from表单相关

form（表单标签）功能：

form内可包含其他输入或者选择类型的标签，例如：input、select、textarea、lable等。
form表单用于向服务器发送数据。实现用户与服务器之间的交互。

form表单的属性：

id	表单专属身份号，不可重复，给JS操作使用。
name	表单的昵称，可以跟别的名字重复，给JS操作使用。
action	设置向何处提交表单的地址（URL）
method	表单数据的提交方式，取值get（默认get），发送post。
enctype	被提交数据的编码方式（加密方式）默认url-encoded，上传附件时使用Multipart/form-data
target	规定 action 属性中地址的目标（默认：_self）。

input标签

name	提示信息，给标签起的昵称，可重复。绝大多数标签都可以设置name	<input type="radio" name="number"/>
value	标签内可设置的属性值，设置完value后就默认为此标签的文本内容	<input type="text" value="请输入姓名"/>
size	设置可输入区域所能显示的文本上限，每一个字符为一个数量	<input type="text" size="1000"/>
readonly	只读模式	<input type="text" size="1000" readonly value="只能看不能改"/>
disabled	丧失功能	<input type="text" size="1000" disabled value="丧失功能"/>
checked	单选和多选时，默认选中	<input type="radio" name="num" checked/>

value属性的不同表现形式汇总：

文本提示：当type="text","password","hidden"时。
按钮上的文字提示：当type="button","reset","submit"时。
相关联的值：当type="CheckBox","radio","file"时。

label标签

当我们操作最简单的input标签时候，会发现我们常见的别人家网站的登录页面显示为：

label标签就是为input定制头的。

<label for="username">邮箱：</label>
<input type="text" value="请输入用户名" id="username">

label示例

select下拉框

select是下拉框，下拉框里的每一个选项是“option”，这个组合跟ul、ol、dl很相似，以组的方式出现。

select属性：

size：规定选项的大小
multiple：允许多选
disable：丧失功能

option：selected默认选中。

<select name="" id="" size="10" multiple disabled >
    <option value="" selected>1</option>
    <option value="" selected>2</option>
    <option value="">3</option>
    <option value="">4</option>
    <option value="">5</option>
</select>

select示例代码

textarea文本区域

text ：文本；area ：区域 → textarea ：文本区域。

属性：

name：名称
value：默认值（在这个标签中少用、慎用）
row：行数
cols：列数
readonly：只读
disable：丧失功能

<textarea name="textarea" id="0" cols="30" rows="10" value="少用、慎用" readonly disabled>文本</textarea>

textarea

语义化(了解知识)

<form action="">
    <fieldset>
        <legend>
            登录...
        </legend>
        <label for="username">用户名</label>
        <input type="text" id="username">
        <label for="password">密码</label>
        <input type="password" id="password">
    </fieldset>
    <fieldset>
        <legend>
            注册...
        </legend>
        <label for="register_username">用户名</label>
        <input type="text" id="register_username">
        <label for="register_password">密码</label>
        <input type="password" id="register_password">
        <label for="register_password_affirm">确认密码</label>
        <input type="password" id="register_password_affirm">
    </fieldset>

</form>

语义化示例代码

posted on 2019-03-12 16:00 🐳️南栀倾寒🐳️ 阅读(132) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

🐳?南栀倾寒🐳?

html基础

p段落标签

标签div&span

br.hr.center

预定义pre标签

超链接a标签

外部链接：

锚链接：

邮件链接：

特殊属性值：

其他属性：

a标签与p标签

图片img标签

img 属性之 src

img标签其他常用属性

body内列表标签

ul 无序列表

ol 有序列表

ol 有序列表

dl 定义列表

表格table标签

table（表格）的属性：

表格的行 tr

表格的单元格 td

合并单元格

表格的<caption>、<thead>、<tbody>、<tfoot>

from表单相关

input标签

label标签

select下拉框

textarea文本区域

导航

公告