前端基础之HTML

时间：2019-09-04 00:31:34 阅读：96 评论：0 收藏：0 [点我收藏+]

标签：面向出现 tle idt baidu 对象一个特定发送

一、HTML介绍

1.Web服务本质

浏览器中敲入回车发生了几件事？

1.浏览器朝服务端发送请求

2.服务端接收请求

3.服务端返回相应的请求

4.浏览器接收响应，根据特定的规则渲染页面展示给用户看

详细过程

浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面

2.HTTP协议

什么是HTTP协议？

HTTP协议是超文本传输协议

规定了浏览器与服务端之间消息传输的数据格式

四大特性

1.基于请求响应

2.基于TCP/IP之上的作用于应用层的协议

3.无状态（服务端不保存用户的状态，也就相当于客户端访问之后没有记录）

4.无连接（请求来一次我响应一次之后立马断开连接两者之间就不再有任何关系了）

请求数据格式

1.请求首行(标识HTTP协议版本,当前请求方式)

2.请求头（许多k,v键值对）

3.换行符（/r /n,此处应空着）

4.请求体（携带一些敏感信息，如密码）

响应数据格式

1.响应首行

2.响应头

3.换行符（/r/n，此处应空着）

4.响应体(返回给浏览器页面的数据通常响应体都是html页面)

响应状态码

用一串简单的数字来表示一些复杂的状态或者提示信息

1XX:服务端已经成功接收了你的数据正在处理你可以继续提交额外的数据

2XX:服务端成功响应你想要的数据(请求成功200)

3XX:重定向(当你在访问一个需要登录之后才能访问的页面你会发现窗口会自动调到登录页面 301 302)

4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)

5XX:服务器内部错误(500)

请求方式

1.get请求

朝服务端要资源（比如浏览器窗口输入www.baidu.com）

2.post请求

朝服务端提交数据（比如用户登录提交用户名和密码）

URL:统一资源定位符（也就是网址）

3.HTML是什么

HTML是一种超文本标记语言，是一种用于创建网页的标记语言

网页能正常显示出来，必须遵循html标记语法，所以浏览器显示出来的页面，内部都是html代码

它不是一种编程语言，HTML使用标签来描述网页

4.HTML注释

注释是代码之母

<!--

多行注释

-->

一般情况下html的注释都会按照下面这个方式来写

5.HTML文档结构

最基本的html文档

<!DOCTYPE html>
<html lang="en"> <!--en会告诉浏览器内容为英文,中文为zh,若没有lang则浏览器会根据内容自己解析>
<head>
    <meta charset="UTF-8"> <!--meta 为body里内容的编码的方式-->
    <title>Title</title>  <!--网页的标题-->
</head>
<body>
</body>
</html>

<!DOCTYPE html>声明为HTML5文档。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">

二、HTML常用标签

1.标签分类

双标签(<h1></h1> <a></a>)

单标签(自闭和标签 <img/>)

块级标签(独占浏览器一行)

div p h

块儿级标签可以修改长宽

块儿级标签内部可以嵌套任意的块级标签

但是p标签虽然是块儿级标签 ,但是他不能够嵌套其他块儿级标签,包括自身

所以：只要是块儿级标签都可以嵌套行内标签

p标签只能嵌套行内其他块儿级可以嵌套任意的块儿级标签

行内标签(自身文本多大就占多大)

span b s i u

div和span通常都是用来构建网页布局的

2.head常用标签

<title></title>:显示网页标题
<style></style>:定义内部样式，内部支持写css代码
<script></script>:定义JS代码或引入外部JS文件
<link/>:专门用来引入外部的css文件或网站图标
<meta/>:定义网页原信息

3.body常用标签

基本标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
?
<p>段落标签</p>
?
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
?
<!--换行--><br>
<!--水平线--><hr>

4.特殊字符

空格:&nbsp;

>：&gt;

<:&lt;

&:&amp;

¥:&yen;

版权:&copy;

注册:&reg;

5.img标签

<img src="图片的路径(url)" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

6.a标签

超链接标签

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

href:里面选择超链接地址,注意如果没加http://,https://,file://,前缀默认会在原来地址后面添加拼接成一个新的链接

href后面存放url的时候 点击跳转到该url 如果该链接没有被点过 那么默认是蓝色,只要点过依次 之后都是紫色

targe:

_self:在原本的窗口打开

_blank:创建一个新窗口打开

_top:覆盖上一条记录

_parent:覆盖所有的记录

且超链接点击后会在浏览器上生成记录,显示文本颜色会变紫色

锚点功能(回到顶部) href还可以写另一个a标签的id值,点击就会跳到id值所对应的a标签

每一个标签都应该有三个比较重要的属性

1.id值该值就类似于人的身份证号在用一个html文档id应该保证唯一不重复

2.class值该值就类似于面向对象里面的继承可以写多个

3.style(不是必备) 支持在标签内直接写css代码属于行内样式优先级最高

任何标签都支持自定义属性!!!

7.列表标签

<p>无序标签</p>
<ul type="square">
<li>01</li>
<li>02</li>
<li>03</li>
</ul>


</ul>
<p>有序标签</p>
<ol type="I" start="2">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ol>

标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

8.表格标签

表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。表格的基本结构：

<table border="20" cellpadding="10" cellspacing="10">
    <thead>
    <tr>
        <th>username</th>
        <th>password</th>
        <th>hobby</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>老鱼</td>
        <td>123</td>
        <td>新垣结衣</td>
    </tr>
    <tr>
        <td>野猪</td>
        <td>123</td>
        <td>玩泥巴</td>
    </tr>
    <tr>
        <td>星总</td>
        <td>123</td>
        <td>隔壁老王</td>
    </tr>
    </tbody>
</table>

tr表示一行

th与td都是文本

thead内使用th

tbody内使用td

属性:

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 竖直方向
colspan:水平方向

三、表单

能够接受用户输入（输入/选择/上传）并将其发送给后端

1.input标签

type中输入：

txet:普通文本

password:密文

date：日期

submit：触发提交动作

button:普通按钮，没有实际意义，但是可以通过js绑定事件实现自定义动作

reset:重置表单内容

radio:单选可以通过checked控制默认选择(当属性值和属性名相同的情况下可以简写 checked) checked="checked"

checkbox:多选同上可以设置默认值

file:获取用户上传的文件

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

<h1>时尚注册页面</h1>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
    <p><label for="d1">username:<input type="text" id="d1"></label></p>
    <p><label for="d2">password:<input type="password" id="d2"></label></p>
    <p><label for="d3">birthday:<input type="date" id="d3"></label></p>
    <p>性别：
        <input type="radio" name="gender" checked>男
        <input type="radio" name="gender">女
    </p>
    <p>爱好：
        <input type="checkbox" name="hobby">篮球
        <input type="checkbox" name="hobby">足球
        <input type="checkbox" name="hobby">排球
    </p>
<p>隐身：
        <input type="hidden">
    </p>

2.select标签

默认是单选可以通过multiple变成多选

如果想默认选择用selected (selected="selected")

    <p>省市：
        <select name="" id="">
            <option value="">上海</option>
            <option value="">深圳</option>
            <option value="">广州</option>
        </select>
    </p>
    <p>偶像：
        <select name="" id="" multiple>
            <option value="">胡歌</option>
            <option value="">彭于晏</option>
            <option value="">张国荣</option>
            <option value="">梁朝伟</option>
            <option value="">罗志祥</option>
            <option value="">黄渤</option>
            <option value="">张艺兴</option>
            <option value="">迪丽热巴</option>
        </select>
    </p>
    <p>省市1：
        <select name="" id="">
            <optgroup label="上海市">
                <option value="">黄浦区</option>
                <option value="">浦东新区</option>
                <option value="">静安区</option>
            </optgroup>
            <optgroup label="深圳市">
                <option value="">罗湖区</option>
                <option value="">福田区</option>
                <option value="">宝安区</option>
            </optgroup>
        </select>
    </p>

3.textarea标签

获取用户输入的大段文本

    <p>个人简介：
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>

前端基础之HTML

标签：面向出现 tle idt baidu 对象一个特定发送

原文地址：https://www.cnblogs.com/xiongying4/p/11456419.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行