html基础

时间：2019-03-12 16:06:01 收藏：0 阅读：207

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" >
<img src=".\01.png" >
<!--上级目录下的01.png的写法-->
<img src="..\01.png" >
<!--指定目录下的01.png的写法-->
<img src="指定目录\01.png" alt="">

网络（绝对）路径：

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

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>

语义化示例代码

技术分享图片

原文：https://www.cnblogs.com/yanranran/p/10517278.html