web前端

qq_51177088

已于 2022-06-01 10:01:17 修改

阅读量104

点赞数

文章标签：前端 html

于 2022-03-13 13:35:24 首次发布

本文链接：https://blog.csdn.net/qq_51177088/article/details/123065795

版权

html

基础知识

HTML 文档由 HTML 元素定义,由相互嵌套的 HTML 元素构成。
大多数 HTML 元素可拥有属性，属性可以在元素中添加附加信息，属性一般描述于开始标签
属性的先后顺序为： type – id – class – name – value ，其他需要添加的属性最后写。

基本结构

head元素

<head>元素包含的标签

body元素

标题标签<h>

<h >标题</h>

段落标签<p>

<p >段落</p>

图像标签<img>

<img src="url"  alt="当图片无法加载时替换的文本">

链接标签<a>

<a href="url" target=""链接在何处打开" >链接文本/其他</a>

布局标签

<iframe>框架

<iframe src="URL"></iframe>

<div>与<span>元素
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
<div> 标签常用于组合块级元素，定义 HTML 文档中的一个分隔区块或者一个区域部分。
简单来说，div就是合并，span就是切割，都是为了方便css对网页进行优化布局

列表

无序
无序列表使用 <ul> 标签
<li> 定义列表项
有序
无序列表使用 <ol> 标签
<li> 定义列表项

样例：

有序
<ol>
	<li>Coffee</li>
	<li>Milk</li>
</ol>

无序
<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>

表格

<table>标签用来创建表格，<tr>标签用来创建行，<td>标签用来创建列。
设置属性的先后顺序为border – width – height
样例：

<table border="1px" width="100%" height="200px">
    <tr>
        <td>语文</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>90</td>
        <td>95</td>
    </tr>
</table>

表单

相关知识
Form表单本身是自带提交功能的，通过修改onsubmit属性，取消Form表单的自动提交功能，则此时需要通过submit()函数手动提交

<form action="url" method="post/get" onsubmit="return false"></form>

`标签。

输入域：input标签

输入框

你可以使用标签来创建一个输入框，使用type属性来指定input元素的类型，使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。
例子如下：

   姓名：<input type="text" name="userName"/>

密码框

你可以使用标签来创建一个输入框，使用type属性来指定input元素的类型为密码框，其输入框的值为value属性的值。
例子如下：

   密码：<input type="password" name="pwd" value="123456"/>

选择框

你可以使用 type="checkbox来创建一个多选框。
你可以使用type="radio"来创建一个单选框
需要注意的是,同一组选框的name属性的值要一样
例子如下：

<input type="checkbox" name="hobby" />足球  <br>
<input type="checkbox" name="hobby"/>篮球   <br>

按钮

你可以使用 type="submit"来创建一个提交按钮，用于向服务器端发送数据。
语法：

<input type="submit" value="提交按钮"/>

搜索框

html5新增搜索框
语法：

在这里插入代码片

文本域：textarea标签

标签可以定义多行的文本输入框。用宽（width）和高（height）来定义输入框的大小，用maxlength来定义文本区域最大能输入的字符数。

例子如下：

<style>
textarea{
  width:160px; 
  height:100px;
}
</style>
个人描述：<textarea maxlength="10"></textarea>

下拉选择：select标签

select 元素用来创建下拉列表。
select 元素中的 option 标签定义了列表中的可用选项。
每个 option元素都应该有一个 value 属性，其中包含被选中时需要提交到服务器的数据值。如果不含 value 属性，则 value 值默认为元素中的文本。
可以在 option 元素中设置一个 selected 属性以将其设置为页面加载完成时默认选中的元素。
例子如下：

<select class="common">
        <option value="中专" /><span>中专</span>
        <option/><span>大专</span>
        <option value="本科"  selected/><span>本科</span>
        <option id="ss"/>
        <label for="ss">硕士</label>
</select>

效果：
效果如下

label标签

标签为 input 元素定义标注（标记）。
? label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
注意：标签的 for 属性应当与相关元素的 id 属性相同。

语法：

<input type="radio" name="sex" id="male"/>
<label for="male">男</label>

iframe框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

语法：

<iframe src="URL" width="" height=""></iframe>

属性

frameborder
frameborder 属性用于定义iframe表示是否显示边框
例子如下：

<iframe src="hrl" frameborder="0"></iframe>

颜色

布局（见css）

简单的js与html综合

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z的网站</title>
<style>
	.common{
    width:230px;
    height: 30px;
}
    .center{
        text-align:center;
    }
</style>
<script>
	function Submit(){
		var Username=document.forms["myForm"]["Username"].value;
		var Password=document.forms["myForm"]["Password"].value;
		var myForm=document.getElementById("myForm");
		if(Username=="zt"&&Password==123456)
		{
			myForm.submit();
		}
		else
		{
			window.alert("账号密码错误，请重新输入");
		}
	}
	function Reset(){
		document.getElementById("Username").innerHTML=" ";
		document.getElementById("Password").innerHTML=" ";
	}
</script>
</head>
<body>
 
<h1 class="center">登陆界面</h1>
<form action="https://www.runoob.com/jsref/dom-obj-event.html" id="myForm"name="myForm" method="post" onsubmit="return false">
    <div class="center">
    账号<input type="text" name="Username" class="common" id="Username"/>
    <br><br><br>
    密码<input type="password" name="Password" class="common" id="Password"/>
    <br><br><br>
    <input type="submit" value="登 录" onclick="Submit()"/>
    <input type="submit" value="重 置" onclick="Reset()"/>
    </div>
</form>

</body>
</html>

简单的css与html综合

><meta charset="UTF-8">
<style>

.container{
    width: 40%;
    margin: 20px auto;
}
.common{
    width:230px;
    height: 30px;
}
span{
    display:inline-block;
    width: 150px;

    text-align: right;
}
div{
    margin-bottom: 10px;
}
</style>

<!-- *********用class类时不需要前面的点********* -->
<form class="container">
<div>
    <span>用户名：</span>
    <input type="text" class="common" />
</div>

<div>
    <span>昵称：</span>
    <input type="text" class="common" />
</div>

<div>
    <span>性别：</span>
    <input type="radio" name="sex" id="male"/>
    <label for="male">男</label>
    <input type="radio" name="sex" id="female"/>
    <label for="female">女</label>
    <input type="radio" name="sex" id="other" disabled/>
    <label for="other">保密</label>
</div>

<div>
    <span>教育程度：</span>
    <select class="common">
        <option value="高中"/><span>高中</span>
        <option value="中专" /><span>中专</span>
        <option value="大专" /><span>大专</span>
        <option value="本科"  selected/><span>本科</span>
        <option value="硕士" /><span>硕士</span>
        <option value="博士"/><span>博士</span>
        <option value="其他"/><span>其他</span>
    </select>
</div>

<div>
    <span>婚姻状况：</span>
    <input type="radio" id="single" name="state" checked="checked"/>
    <label for="single" ">未婚</label>
    <input type="radio" id="married" name="state"/>
    <label for="married">已婚</label>
    <input type="radio" id="secret" name="state"/>
    <label for="secret" >保密</label>
</div>

<div>
    <span>兴趣爱好：</span>
    <input type="checkbox" name="hobby" id="football"/>
    <label for="football">踢足球</label>
    <input type="checkbox" name="hobby" id="basketball"/>
    <label for="basketball">打篮球</label>
    <input type="checkbox" name="hobby" id="film" checked="checked"/>
    <label for="film" >看电影</label>
</div>

<div>
    <span>描述自己的特点：</span>
    <textarea class="common" maxlength="20"></textarea>
</div>

<div>
    <span></span>
    <input type="submit" class="common" value="提交"/>
</div>
</form>

HTML速查

在这里插入图片描述

css

见链接

qq_51177088

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端

web前端html+css+js基础html基础知识表格表单input标签输入框密码框选择框按钮文本域：textarea标签下拉选择：select标签label标签综合样例html+css+js基础html基础知识属性的先后顺序为： type – id – class – name – value ，其他需要添加的属性最后写。表格table>标签用来创建表格，标签用来创建行，标签用来创建列。设置属性的先后顺序为border – width – height样例：<ta
复制链接

扫一扫