HTML基础

最新推荐文章于 2024-11-09 19:20:14 发布

weixin_43664947

最新推荐文章于 2024-11-09 19:20:14 发布

阅读量104

点赞数

分类专栏： HTML基础文章标签： html

本文链接：https://blog.csdn.net/weixin_43664947/article/details/110498468

版权

HTML基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Web概念：
JavaWeb:使用Java语言开发基于互联网的项目
软件架构：
1.C/S：
2.B/S：

B/S架构详解：
静态资源：使用静态网页开发技术特点：
1.所有用户访问最后得到的结果是一样的
2.如：文本、图片、音频、视频、HTML、CSS、JavaScript
3.如果用户请求的是静态资源，那么服务器会将直接将静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎，可以解析静态资源

动态资源：使用动态网页技术发布的资源
特点：
1.所有用户访问得到的结果可能不一样
2.如：jsp/servlet,php,asp…
3.如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器

静态资源：
HTML:用于搭建基础网页，展示页面的内容
CSS:美化页面，对页面进行布局
JavaScript:控制页面的元素，让页面有一些动态效果

HTML:是最基础的网页开发语言
1.概念：Hyper Text Markup Language 超文本标记语言
超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：有标签构成的语言。<标签名称>如html，xml
标记语言不是编程语言，没有逻辑性

2.快速入门
语法：
1.html文档的后缀名。.html或者.htm
2.标签分为：
围堵标签：有开始标签和结束标签。如
自闭标签：开始表亲啊和结束标签在一起如

3.标签可以嵌套：
需要正确嵌套，不能你中有我，我中有你错误：
正确：
4.在开始标签中可以定义属性，属性是由键值对构成，值需要用引号引起来
5.html标签不区分大小写，建议用小写
标签学习：
1.文件标签：构成HTML最基本的标签
html:标识html的根标签
head:头标签用于去指定heml文档的一些属性，还可以引入一些外部的资源
title:定义标题的标签
body:体标签
<！DOCTYPE html>：html5中定义该类文档是html文档
2.文本标签：和文本有关的标签

*注释:<!-- 注释内容-->
*<h1>to<h6>:标题标签
*<p>:段落标签
*<br>:换行
*<hr>:显示一条水平线
*<b>:字体加粗
*<i>:字体斜体
*<font>:字体标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本标签</title>
</head>
<body>
    <!-- 注释 -->
    <!-- br 换行 -->
    百日依山尽，<br/>
    黄河入海流。<br/>

    去哪儿网旅行
    <h1>去哪儿网旅行</h1>
    <h2>去哪儿网旅行</h2>
    <h3>去哪儿网旅行</h3>

    <hr color="red" width="200" size="10" align="left" />

    <hr />
    <!--加粗  b-->
    <b>白日依山尽</b> <br />
    白日依山尽
    <br/>
    <font color="red"  size="5" face="楷体">白日依山尽<font/> <br />


hello world!!!
</body>
</html>

文本标签案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>公司简介</h1>
<hr color="#ffd700">

<p><font color="red">工作做得很细很完善</font>，<b><i>可以给5G基站的监管提供技术支持和宝贵资料</i>></b>。目前各省都比较重视5G，但是新的监测方法还在上报没有发布，新的标准也在制定中，监测方面还是有很多不确定的内容，项目可以给一系列标准的修订提供支撑，也回应了热点问题。
运营商等希望国家能够放宽相应的标准以更好地发展5G服务。相比较雷达、广电、卫星等，无线通讯的通信备忘录、登记表、报告书等分类名录比较粗，下一步要细化分类管理名录。
</p>
<p>
结题报告中单位用的都是V/m，但是ICNIRP标准中单位一直是用功率密度，公众可能会有疑问，两种单位之间可以换算一下。
</p>
<p>
5G的近场很小，基本都处于远场区，近场区可以不用监测。
</p>
<p>
检波方式是均方根值、结果类型设置为平均值、仪器性能、仪器的支架材质是否满足要求等内容可以在报告的监测方法中写一下，强调一下符合5G监测方法。
共站包括2、3、4G不同的频段，建议给出针对5G频段而言是否达标的结论。
</p>
<hr color="#ffd700">
<font color="gray" size="2">
    <center>
监测结论主要是对一些场景的分析，对于数值的分析好像不太多<br />
        建议补充是否达标，取值范围，多远多高，基本数据等内容
    </center>
</font>

</body>
</html>

3.图片标签：
*img:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--展示一张图片  img-->
<!--
相对路径：./开头   ./img/
-->
<img src="img/VCG21gic20022486.jpg"  align="right"  alt="古镇"  width="1000"  height="1000"/>

</body>
</html>

4.列表标签：

*有序列表：
1.ol:
2.li:
*无序列表：
1.ul:
2.li:
5.链接标签：
*a:定义一个超链接
属性：
href:指定访问资源的URL（统一资源定位符）
target:指定资源打开的方式
*_self:默认值，在当前页面打开
*_blank:在空白页面打开
6.div和span（与css结合）
span:行内标签内敛标签文本信息在一行
div:每一个div占满一整行，块级标签
7.语义化标签：html5中为了提高程序的可读性，提供了一些标签

<header>
<footer>

8.表格标签：
table:定义表格
*border:边框
*width:宽度
*cellspacing:定义单元格之间的距离
*cellpadding:定义内容和单元格之间的距离
*bgcolor:背景色
tr:定义行
属性：
*bgcolor:背景色
*align:对齐方式
td:定义单元格
属性：
colspan:合并列
rowspan:合并行
th:定义表头单元格
caption:表格标题
thead:表示表格的头部分
tbody:表示表格的体部分
tfoot:表示表格的脚部分

表单标签：
表单：用于采集用户输入的数据，用于和服务器进行交互
使用标签form：用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
表单项标签：
input:可以通过type属性值，改变元素展示的样式
type属性：
text:文本输入框，默认值
*placeholder:指定输入框的提示信息，当输入框的内容发生变化，会自动清空
password:密码输入框
radio:单选框
checkbox:复选框
file:文件选择框
hidden：隐藏域，用于提交一些信息
按钮：
submit:提交按钮
butten:普通按钮
image:图片提交按钮 src指定图片的路径
注意：
1.要想让多个单选框实现单选，则多个单选框name属性的值必须一样
2.一般会给每个单选框提供value属性，指定其被选中后提交的值
3.默认选中check
checkbox:复选框
label:指定输入项的文字描述信息
注意：label的for属性一般会和input的id属性值对应。如果对应了，点击label区，会让input输入框获取焦点
1.一般会给每个单选框提供value属性，指定其被选中后提交的值
2.默认选中check

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--form
    属性：
    action:指定提交数据的URL
    method:指定提交方式
        *分类：一共其中，两种比较常用
        get:
        1.请求参数会在地址栏中显示，会封装在请求行中（http协议之后讲解）
        2.请求参数长度是有限制
        3.get请求不太安全
        post:
        1.请求参数不会在地址栏中显示，会封装在请求体中（http协议之后讲解）
        2.请求参数长度没有限制
        3.较为安全
        表单项中的数据，要想被提交，必须指定其name属性
    -->
<form action="#" method="get">
    <label for="username">用户名</label> ：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别：<input type="radio" name="gender" value="male">男
         <input type="radio" name="gender" value="female">女
    <br>
    爱好：<input type="checkbox" name="hobby" value="shopping"> 逛街
        <input type="checkbox" name="hobby" value="food"> 吃饭
        <input type="checkbox" name="hobby" value="travel"> 旅游
    <br>
    图片：<input type="file" name="file"><br>
    隐藏域：<input type="hidden" name="id"  value="aaa"><br>
    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="birthday"><br>
    生日：<input type="datetime-local" name="birthday"><br>
    邮箱：<input type="email" name="email"><br>
    年龄：<input type="number" name="age"><br>
    <br>
    <input type="submit" value="登录">
    <input type="button" value="按钮"><br>
    <input type="image" src="image/logo.jpg"><br>


</form>
</body>
</html>

selct:下拉列表
textarea:文本域

<!--select 下拉列表
    子元素：option,指定列表的子项
    -->
    省份：<select name="province">
    <option value="">--请选择--</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">陕西</option>
        </select><br>

    <!--文本域    
    cols:指定列数，每一行有多少字
    rows:指定行数
    -->
    自我描述：<textarea cols="20" rows="5" name="description"></textarea>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--定义表单 form-->
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>

            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="password" id="password"></td>
            </tr>

            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" name="email" id="email"></td>
            </tr>

            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="name" id="name"></td>
            </tr>

            <tr>
                <td><label for="tel">手机号</label></td>
                <td><input type="text" name="tel" id="tel"></td>
            </tr>

            <tr>
                <td><label >性别</label></td>
                <td><input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female">女</td>
            </tr>

            <tr>
                <td><label for="birthday">出生日期</label></td>
                <td><input type="date" name="birthday" id="birthday"></td>
            </tr>

            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td><input type="text" name="checkcode" id="checkcode"></td>
            </tr>

            <tr>
                <td colspan="2" align="center"><input type="submit" name="submit" value="注册"></td>
            </tr>
        </table>

    </form>

</body>
</html>