web全栈学习day1——HTML

linlinzi的学习日记

已于 2024-04-10 18:26:12 修改

阅读量421

点赞数 10

分类专栏： web全栈学习日记文章标签：学习前端 html

于 2024-03-27 11:32:42 首次发布

本文链接：https://blog.csdn.net/lqqqqqql6/article/details/137024677

版权

web全栈学习日记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了网站的基本框架结构，包括前端、后端和数据库。详细讲解了网页的本质、HTML常见标签如标题、段落、链接、列表、文本格式、表格和表单控件的使用。并通过实例演示了表单的创建和功能。

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

一、网站框架

首先，网站可以分为前端、后端以及数据库三个框架。其中后端发挥着重要的作用。

二、什么是网页

网页就是一个放在服务器上的一个文件，当我们浏览网页时，这个文件会被下载到我们本地的电脑，然后由浏览器解析，渲染出各种漂亮的界面。

网页文件的后缀有很多，如.html、.php、.jsp、.asp等，但其本质都是由HTML代码构成的纯文本文件。

三、HTML基础

HTML常用标签

1.标题标签(h1-h6)

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2.段落标签(p)

<p>第一个段落</p>

3.换行标签(br此标签属于单标签)

<br/>

4.水平线标签(hr)

<hr/>

5.图片标签（img）

<img src='图片地址' alt="图片的描述">

6.超链接标签(a)

<a herf='https://www.baidu.com'>去百度的链接</a>

7.列表标签

有序列表

<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>

无序列表

<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>

8.文本格式标签（在css里面可以设置）

<strong>加粗</strong>
<em>倾斜</em>
<del>删除线</del>
<ins>下划线</ins>

9.表格标签(table)

<table>
    <tr><!--行标签-->
        <td>姓名</td><!--列标签-->
        <td>年龄</td>
        <td>性别</td>
    </tr>
        <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
    </tr>
        <tr>
        <td>李四</td>
        <td>18</td>
        <td>女</td>
    </tr>
</table>

合并单元格

跨行合并：rowspan = "个数"

跨列合并：coolspan = "个数"

10.表单（一般用于搜集用户信息）

在HTML中一个完整的表单通常包含表单控件、提示信息、表单域3个部分。

表单域<form></form>

表单控件

input：输入表单元素

<input type="value">

type属性的属性值及其描述如下：

select:下拉列表单元素

<form action="">
    <p>城&emsp;市：<select name="城市选择" >
            <option>python</option>
            <option>java</option>
            <option>php</option>
            <option>c++</option>
        </select></p>
</form>

textarea:多行文本域元素

<form action="">
    <p>自我介绍：<textarea name="description" cols="30" rows="10">此处是描述信息</textarea></p>
</form>

四、表单实操练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <p>用户名:<input type="text"></p>
    <p>密&emsp;码:<input type="password"></p>
<!--nbsp emsp-->
    <p>年&emsp;龄:<input type="text"></p>
    <p>性&emsp;别:
        男<input type="radio" name="gender" value="1">
        女<input type="radio" name="gender" value="0"></p>
    <p>技&emsp;能:python<input type="checkbox">
                 java<input type="checkbox">
                 php<input type="checkbox">
                 c++<input type="checkbox">
                 c#<input type="checkbox"></p>
    <p>城&emsp;市:<select name="城市选择" >
        <option>重庆</option>
        <option>深圳</option>
        <option>成都</option>
        <option>青岛</option>
        <option>北京</option>
        </select></p>
    <p>自我介绍:<textarea name="description" cols="30" rows="10">此处是描述信息</textarea></p>
    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<input type="reset">&emsp; &emsp; &emsp; <input type="submit"></p>
</form>
</body>
</html>

运行结果如下：