前端开发学习之路1

最新推荐文章于 2023-06-01 09:49:18 发布

金子轩

最新推荐文章于 2023-06-01 09:49:18 发布

阅读量158

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_42717735/article/details/97667644

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Html5/css3

1.Html

超文本标记语言，搭建页面骨架
超文本：指页面内不仅包含文本，字符，还可以包含图片、视频、音频、超链接、地图、统计图。。。。

标记语言

<h1>
hello world
</h1>
<p>
this is a para...
</p>

特点：
1.语法简单
2.容量小
3.功能强大
4.字符

2.计算机网络
互联网
广域网、局域网
ip地址动态的（连那个网就是哪个ip）
mac地址静态的（只要网卡不变就不会变）
01=>字符
HTTP协议（超文本传输协议）=>（B/S）
url 统一资源定位符：定位网络中唯一的一个资源

协议：http://ip:port/path

ip:主机
port:端口
服务 apache
：apache部署目录 /var/www/html/…

path:/sms/start.html

3.Html编写
1）编写html代码（客户机）
2）测试html代码（客户机、浏览器）
3）部署发布

4.html版本问题
H5和H4和XHtml
html有三波人使用
1）W3C -> 制定标准
2）程序员 - > 使用html编写
3）浏览器厂商 -> 解析html文件

5.H5和H4的区别
1）结构

<!DOCTYPE html>
<meta charset ="UTF-8">

2）兼容性
h4 兼容性更好一些
h5主要用于webapp的开发
手机打开网页（uc浏览器、微信分享链接、微信公众号、中国移动）
android -> google /chrome
ios -> safari
3）新增了很多新特性
语义化标签
表单input新增了type
画布 cavas
本地存储
缓存
定位。。。。

6.html的主体结构

<!DOCTYPE html>
<html lang="en">------------------------根目录
<head>--------------------------------头部 ->不会显示到浏览器视口中/用来设置或配置
<meta charset="UTF-8">---------源信息 -> 告诉浏览器，我当前这个文档是使用utf-8编译的
<title>第一个网页</title>---------标题 -> 显示在浏览器选项卡中
<link rel="stylesheet" href="style.css">------导入外部文件（解耦）
<style></style>--------------------html内部写css样式
<script src="index.js"></script>--------导入外部JavaScript文件
</head>
<body>--------------------------------主体
<h1>one</h1>
<p>hello</p>
<div>first</div>
</body>
</html>

编码：由编辑器编译（sublime ->utf-8）
utf-8（万国码） GBK（国标码） Big5（繁体字）
解码：浏览器

<meta charset="UTF-8">

使用meta标签，告诉浏览器我当前这个文档是使用什么编码方式编译的
7.语法
1）注释：

<!--xxx-->

作用：
1.记录编程思路
2.增加代码量
2）元素：

<head>---------------------------开始标签
<title>第一个网页</title>------子元素/内容
</head>--------------------------结束标签

3）属性：

<div 属性名=属性值 属性名=属性值>first</div>

属性一般添加在开始标签内，属性名与属性值通过“=”隔开，属性与属性通过空格隔开
3.1 核心属性
绝大多数元素都可以添加的属性
id 唯一
class 分类 `

<div class="box"></div>`

title 描述
style 样式
取值为css规则
css规则键值对组成，键与值之间通过冒号隔开，规则之间通过分号隔开
style=“color:#333;background:#fff”
3.2 特有属性
某一些元素才可以添加的属性
img -> src、alt
a -> href 、target
3.3自定义属性（h5）
data-xxx

8.元素
1）块元素（box）（语义化）
-> 用于搭建页面框架
特性：
1）独占一行空间
2）默认宽度为父元素的100%，默认高度由子元素或者内容决定
3）可以为块元素指定高度和宽度
4）不能嵌套在行内元素中
div 无意义的块元素
h1~h3 标题
->margin
font-size
font-weight
p
-> margin
ul/li
-> margin
padding
list-style
ol/li
-> margin
padding
list-style
dl/dt/dd
->dl ->margin
dd ->margin
html
body
-> margin
可以用来重置样式

h5新增的语义化标签（样式与div类似）
header
nav
footer
address
article(网页中单独的块)
section
aside(附属部分)
2）行内元素（inline）
-> 用于页面填充或者装饰
特性
多个行内元素共享一行空间
默认宽高都由内容决定
不可以指定宽高
行内元素一般嵌套在块级元素中
元素
span 无意义的行内元素
a 超级链接(默认事件) open link
href="" 跳转的路径
锚点
url
http://ip:port/path
相对路径
./1-box.html
绝对路径

mailto
打开邮件系统
…

img 图片
src图片的地址
alt如果图片没有加载出来的文字
与a标签中href 属性类似
url
相对路径
绝对路径
装饰类型的行内元素（逐步被淘汰掉）
strong
b
em
i
del
sub/sup
…
元素使用策略
总体策略：先使用块元素搭建页面框架，再使用行内元素填充页面
列表性质用 ol,ul,dl
标题性质用 h1~h3
段落 p
不知道用什么的时候使用div
功能性标签
表格（展示数据列表）
table
属性：width border cellspacing cellspading
caption 标题
thead 表头
tr
td/th
tbody 表体
tr 行
td 列
tfoot 表底
属性：rowspan(列),colspan（行）
注意：表格中每一行的列在计算后列数应该相等
表单（获取用户输入）
注意：
1.所有的表单元素都必须添加name属性
input
2.不可输入但是可以选择的表单元素

<form action="http://192.168.0.100:8080/sms/register.action"  type=""enctype="">
</form>

form的属性
action 后台接口地址
type http 协议请求方式
get 参数拼接在浏览器的地址栏
请求报文格式：
GET /sms/registerr.action?name=terry&password=123
Content-size:12
user-agent:mac safari
post 参数放到请求报文请求体中进行传递（安全，请求量大）
请求报文格式：
GET /sms/registerr.action
user-agent:mac safari

金子轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端开发学习之路1

**Html5/css3**1.Html超文本标记语言，搭建页面骨架超文本：指页面内不仅包含文本，字符，还可以包含图片、视频、音频、超链接、地图、统计图。。。。标记语言<h1>hello world</h1><p>this is a para...</p>特点：1.语法简单2.容量小3.功能强大4.字符2.计算机...
复制链接

扫一扫