Web网页基础01

长歌暖伏生

于 2021-01-30 12:14:07 发布

阅读量328

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/qq_41668667/article/details/113275104

版权

本文档详细介绍了HTML的基础，包括简单的示例、语法规则、文本和图片标签、列表、表格和表单。接着讲解了CSS的结合方式、语法、选择器和属性，如字体、背景、边框和盒子模型。最后，概述了JavaScript的基础，包括与HTML的结合方式、数据类型、变量、运算符和流程控制语句，以及基本的对象如函数、数组、日期和正则表达式。

摘要由CSDN通过智能技术生成

1.HTML基础

基本概念

HTML： HTML的全称是Hyper Text Markup Language 超文本标记语言，是用于搭建基础网页，展示页面的内容，是最基础的网页开发语言

1.简单示例

<html>

<head>
    <title>title</title>
</head>

<body>
<FONT color='red'>Hello World</font><br/>

<font color='green'>Hello World</font>

</body>

</html>

2.语法规则

1.html文档后缀名 .html 或者 .htm

2.标签分为

围堵标签：有开始标签和结束标签。如 <html> </html>
自闭和标签：开始标签和结束标签在一起。如 <br/>

3.标签可以嵌套

需要正确嵌套，不能你中有我，我中有你

4.在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来

5.html的标签不区分大小写，但是建议使用小写。

3.文件标签

html:html文档的根标签
head：头标签。用于指定html文档的一些属性。引入外部的资源
title：标题标签
body：体标签

4.文本标签

注释
 < !-- 注释内容 -->
<!--    hello，world！-->

 <h1>to<h6>：标题标签，h1~h6:字体大小逐渐递减

<p>：段落标签

<br>：换行标签

<hr>：展示一条水平线
属性：color：颜色，width：宽度，size：高度，align：对其方式

<b>：字体加粗

<i>：字体斜体

<font>:字体标签

<center>:文本居中
属性：color：颜色，size：大小，face：字体

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<h1>
    公司简介
</h1>
<!--展示一条水平线-->
<hr color="#ffd700">
<!--第一段落-->
<p>
<!--    设置字体颜色，加粗，倾斜-->
    <font color="#FF0000">xxxxx1</font>xxxxx2<b><i>xxxxx3</i></b>
</p>
<!--第二段落-->
<p>
    xxxxx4
</p>
<!--第三段落-->
<p>
   xxxxx5
</p>
<!--第四段落-->
<p>
    xxxxx6
</p>
<!--展示一条水平线-->
<hr color="#ffd700">

<!--设置字体颜色，大小-->
<font color="gray" size="2">
<!--    设置字体居中-->
    <center>
        xxxxx7<br>
        xxxxx8
    </center>
</font>

</body>
</html>

5.图片标签

img：展示图片

属性：src：指定图片的位置

<img src="/image/banner_1.jpg" align="right" alt="图片显示不出来时名字" width="500" height="500"/>

相对路径
以 . 开头的路径

./：代表当前目录 ./image/1.jpg

…/:代表上一级目录

文件结构
在这里插入图片描述

6.列表标签

有序列表

ol：标签头
li：标签体

<oi>
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
</oi>

在这里插入图片描述
无序列表

ul：标签头
li：标签体

<ui>
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
</ui>

在这里插入图片描述
链接标签
a:定义一个超链接

<a href="https://www.baidu.com/" target="_self">百度一下</a>
属性：
	href：指定访问资源的URL(统一资源定位符)
	target：指定打开资源的方式
		_self:默认值，在当前页面打开
		_blank：在空白页面打开

拓展：用一张图片作为资源链接

用一张图片作为资源链接

<a href="http://www.baidu.cn"><img src="image/jiangwai_1.jpg"></a>

7.语义化标签

<header>：页眉

<footer>：页脚

8.div和span

div:每一个div占满一整行。块级标签

<body>
<div>盒子一</div>
<div>盒子二</div>
<div>盒子三</div>
</body>

在这里插入图片描述

div主要用于盒子模型中

span：文本信息在一行展示，行内标签内联标签

9.表格标签

table：定义表格

定义表格基本属性

属性：
width：设置宽度
border：设置边框
cellpadding：定义内容和单元格的距离
cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条
bgcolor：背景色
align：对齐方式
********************************************************
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="red" align="center">

</table>

在这里插入图片描述

当我们刷新上面表格时，只会出现一条横线，是因为没有定义表格内容

tr：定义行

定义一行的基本属性

tr属性
bgcolor：背景色
align：对齐方式
th：定义表头单元格
<!--定义表格基本属性-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="red" align="center">
<!--  第一表格的一行内容-->
    <tr>
<!--        第一行为表头，使用<th>标签-->
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
</table>

显示结果
在这里插入图片描述

从上面我们可以看到，<th>标签是自动居中的

td：定义单元格

colspan：合并列
rowspan：合并行

<!--定义表格基本属性-->
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="red" align="center">
<!--  第一表格的一行内容-->
    <tr>
<!--        第一行为表头，使用<th>标签-->
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>

<!--定义内容，td标签默认不是居中的，需要自己手动设置居中-->
    <tr align="center" bgcolor="yellow">
        <td>1</td>
        <td>小龙女</td>
        <td>100</td>
    </tr>

<!--    和并单元格-->
    <tr>
        <td>2</td>
        <td>杨过</td>
        <td>50</td>
    </tr>
    <tr>
        <td>3</td>
        <td>郭靖</td>
        <td>50</td>
    </tr>

</table>

显示结果
在这里插入图片描述
合并单元格操作

<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    <tr>

        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>

    <tr>
        <td colspan="2">1</td>
<!--        <td>小龙女</td>-->
        <td>100</td>
    </tr>

    <tr>
        <td>2</td>
        <td>杨过</td>
        <td rowspan="2">50</td>
    </tr>
    
    <tr>
        <td>3</td>
        <td>郭靖</td>
<!--        <td>50</td>-->
    </tr>

</table>

显示结果
在这里插入图片描述

10表单标签

表单概念：用于采集用户输入的数据的。用于和服务器进行交互。

表单申明
form标签

form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
属性：
action：指定提交数据的URL(地址)
method:指定提交方式
分类：一共7种，2种比较常用
get请求
1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
2. 请求参数大小是有限制的。
3. 不太安全。
post请求
4. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
5. 请求参数的大小没有限制。
6. 较为安全。

```html
<form action="提交的地址" method="提交的方法">
</form>

表单项申明

input标签：表单项申明

<form method="post" action="#">
    姓名：<input type="text" name="username"><br/>
</form>

显示结果
在这里插入图片描述
代码分析

表单项其他属性

type对应属性：
text：文本输入框，默认值
password：密码输入框
********************************
radio：单选框
1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
3. checked属性，可以指定默认值
checkbox：复选框
1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked属性，可以指定默认值
********************************
file：文件标签，用于提交文件
********************************
submit：提交按钮
button：普通按钮
image：图片提交按钮
********************************
select：下拉框

placeholder属性：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

基本数据输入

<form method="post" action="#">
    姓名：<input type="text" name

最低0.47元/天解锁文章

长歌暖伏生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web网页基础01

1.HTML基础基本概念HTML： HTML的全称是Hyper Text Markup Language 超文本标记语言，是用于搭建基础网页，展示页面的内容，是最基础的网页开发语言1.简单示例<html><head> <title>title</title></head><body><FONT color='red'>Hello World</font><br/>&lt
复制链接

扫一扫

专栏目录