菜鸟自学WEB记—了解web页面布局

乘雷欲上天

已于 2024-06-23 01:16:46 修改

阅读量1k

点赞数 17

分类专栏：菜鸟自学web 文章标签：前端 css

于 2024-06-23 01:15:15 首次发布

本文链接：https://blog.csdn.net/qq_42156603/article/details/139890838

版权

菜鸟自学web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：

个人介绍：硕士搞自动驾驶算法，非科班，懂点CPP但不多，工作原因开始自学java/web开发等，目的为了解开发流程，个人不做实际开发。

系列文档是整理了个人认为重要的干货，详情请查看原视频。
java-web开发入门

独学而无友，则孤陋而寡。欢迎各路大神指点！

1.基本样式概念

样式使用CSS样式，如改变标题颜色，有以下三种方式：

（1）行内样式

写在标签的style属性中如：

<h1 style=”xx:xx”> ...</h1>

（2）内嵌样式

写在head的style标签中如：

<style>
	h1{
	Xxx:xxx;
	}
</style>

(3)外联样式

写在单独的.css文件中，通过以下引入

<link href=”...”>

2.CSS选择器

（1）元素选择器

根据标签名称选择设置样式的对象；

（2）id选择器

给标签指定id属性，再根据id设置样式，id在页面中不重复；

<style>
	# xxx{
	color:#968532;
	}
</style>
<body>
	<span id=”xxx”> xxxxx </span>
</body>

（3）类选择器

根据标签中的class属性来设置样式，class值在一个界面中可以重复,例：

<style>
	//类选择器
	.cls{
	color:#968532;
	}
</style>
<body>
	<span class=”cls”> xxxxx </span>
</body>

（4）优先级

当三个选择器同时设置某元素时，优先级:id选择器>类选择器>元素选择器

3.常用标签

具体可查看工具书。

（1）超链接:

href:指定资源访问的url；
Target：指定在何处打开资源链接；
可以用css设置超链接的样式，具体的css属性可查询工具书；

（2）视频

<videos  src=” xxx” controls></video>

（3）音频

<audios  src=” xxx” controls></audios>

controls表示可以对视频/音频进行控制。

（4）段落标签等。

4.页面布局

（1）盒子模型

页面中所有的元素，都可以看做成为一个盒子，组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)
盒子模型

（2）布局标签

实际页面布局应用中，会大量使用div和span两个无语义布局标签

div标签：
一行只能一个；
宽度默认是父元素宽度，高度由内容确定；
可以设置宽高

span标签：
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽度、高度

5.表单标签

（1）基本概念

表单（form），负责数据收集功能（注册、登录等）
表单默认两个属性：
action：定义表单提交的url，往何处提交数据，如果不指定，则提交到当前页面；正常应该提交到服务端url地址
method:表单的提交方式，分get（默认值）和post两种方式，
1）get:在url后面拼接表单数据，url长度有限制，例：url?Usrname=tom&age=12；
2）post：表单数据在消息体/请求体中传递，大小无限制，
如：

    <form action="" method="get">
        用户名:<input type="text" name="usrname">
        年龄：<input type="text" name="age">
        <input type="submit" value="提交">
    </form>

注意：表单项必须有name属性才可以提交；

（2）表单项

1）input：功能最强大，通过type属性灵活控制输入形式，type有多种属性，具体可查工具书
2）select：定义下拉列表，option定义列表项

        <select>
            <option value="">------请选择国家</option>
            <option value="1">中国</option>
            <option value="2">美国</option>
        </select>