小白入门---HTML基础

最新推荐文章于 2024-07-15 13:17:25 发布

Richer_wangx

最新推荐文章于 2024-07-15 13:17:25 发布

阅读量493

点赞数

分类专栏： WEB前端HTML 文章标签： html

本文链接：https://blog.csdn.net/Miss_wangdapao/article/details/76596285

版权

WEB前端HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML基础知识

1、HTML结构

<!Doctype html><--表示以html5的方式解析-->
<html>
    <head>
        <title>xxx</title><--网页标题为xxx-->
        <meta charset="UTF-8"/><--使用UTF-8编码方式-->
        <meta name="description" content="页面描述"/>
        <mata name="keywords" content="关键字"/><--seo优化-->
        <link rel="icon" type="image/x-icon" herf="图片地址"><--图标-->
        <link rel="stylesheet" type="text/css" href="css文件地址"/><--引入外部css样式>
    </head>
    <body>
        <script type="text/javascript" src="js文件地址" ></script><--引入外部js-->
    </body>
</html>

2、HTML标签

1.标签是用来标志目标的分类或者内容，便于自己和他人查找和定位。
2.所有标签的4个公共属性：title，id，class，style。
3.ul标签里面只能是li标签，可以再li标签里面嵌套其他标签。
4.块级标签：div，p，h1-h5，form，ul，li…
5.行内标签：span，a，label，input，img，strong，em…

3、HTML表单

1.表单在网页中主要负责数据收集功能
1.输入型：text，password…
2.选择型：radio，checkbox…
3.事件性：button，reset…
2.表单的2中提交方式
1.get：路径会暴露安全问题，提交到页面，容量有限
2.post：路径不存在安全问题，提交到后台，大文件使用
3.如果有文件上传的话，必须将enctype更改为multipart/form-data，同时method必须为post

Example：

<form action="" method="get">
    <label><p><input type="text" name="sjh" class="zc" placeholder="请输入手机号"/></p></label>
    <label><p><input type="password" name="zcmm" class="zc" placeholder="密码由6-20位字母、数字和符号组成"/></p></label>
    <label><p><input type="password" name="zcmm1" class="zc" placeholder="请再输入上面的密码"/></p></label>
</form>

4、HTML布局

原则：

1.从上到下，从左到右;
2.能用padding就不用margin，因为margin会影响页面布局.

5、从输入网址到返回页面经历的过程

1.用户操作浏览器，浏览器向服务器发送一个http请求
2.服务器接收http请求，进行初步处理，使用服务器脚本生成页面
3.服务器将生成的页面作为http响应的body，根据不同的处理生成http header返回给客户端
4.客户端接收http响应，开始解析http代码
5.解析过程中遇到引用服务器上的资源（额外的css，js…），再向服务器发送请求，服务器找到对应文件再发送回来
6.进一步解析html，css渲染，js对外观进行一系列处理
7.用户与页面交互，js代码对此作出一定的反应。

Richer_wangx

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
小白入门---HTML基础

HTML基础知识1、HTML结构<!Doctype html><--表示以html5的方式解析--><html> <head> <title>xxx</title><--网页标题为xxx--> <meta charset="UTF-8"/><--使用UTF-8编码方式--> <meta name="description" content="
复制链接

扫一扫