css+html学习笔记

最新推荐文章于 2022-01-21 16:06:02 发布

开始整理

最新推荐文章于 2022-01-21 16:06:02 发布

阅读量244

点赞数 2

分类专栏：学习笔记文章标签： css html

本文链接：https://blog.csdn.net/qq_48274102/article/details/118541497

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5

HTML:hyper Text Markup Language(超文本标记语音），HTML是一门标记性语言，每个标签都有自己的特定功能
HTML5发展史：

编辑工具：

记事本
DreamWeaver
SublimeText（*推荐）

HTML网页结构

<html>
    <head></head>
    <body></body>
</html>

在SublimeText中先输入一个感叹号再按tab键会出现整体框架

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

</body>

</html>

HTML5中常见标签

html:html文件的根标签
head:头标签
body:内容标签
title：题目标签，网页的题目
h1-h6：标题标签：独占一行，对文本进行加粗，h1-h6字体大小逐渐递减
p：段落标签：对文本内容按段落方式进行换行
hr：水平线标签，没有结束标签
ctrl + /键打出注释的
center居中显示
strong：加粗标签
em：斜体字标签
特殊符号：1. 空格 2.>大于 3.<小于 4©版权后面一定要以;结束
img：图片标签,src= 后面更的是图片的引用路径，用“”引用出来，./代表当前路径，这也是一个单个标签没有结束标签
ul,li：无序标签，使用ul和li进行组合
ol,li：有序标签，使用ol和li进行组合
快捷ol>li*3+tab键
table,tr,td：表格标签，其中tr表示行，td表示列。在table中有四个非常重要的属性分别为border指定线宽，width和height指定整个表格的大小，cellspacing单元格的间隙大小，placeholder是默认提示信息。几个的单位都是px。rowspan和colspan分别是列合并和行合并。所有属性都是放在前面的标签括号里面。
video：视频标签，主要属性为controls和src
audio：音频标签，主要属性为controls和src
br：换行，

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单练习</title>
</head>
<body>
	<table width="300px" height="300px" border="1px" cellspacing="0">
		<tr>
			<td>姓名</td>
			<td>
				<input type="text">
			</td>
		</tr>
		<tr>
			<td>密码</td>
			<td>
				<input type="password">
			</td>
		</tr>
		<tr>
			<td>性别</td>
			<td>
				<input type="radio" name="xb">男<input type="radio" name="xb">女
			</td>
		</tr>
		<tr>
			<td>职业</td>
			<td>
				<select name="zy" >
					<option value="1">java工程师</option>
					<option value="2">网络工程师</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>Email</td>
			<td>
				<input type="text">
			</td>
		</tr>
		<tr>
			<td>爱好</td>
			<td>
				<input type="checkbox">音乐<input type="checkbox">体育<input type="checkbox">文学<input type="checkbox">游戏
			</td>
		</tr>
		<tr>
			<td>头像</td>
			<td>
				<input type="file">
			</td>
		</tr>
		<tr >
			<td colspan="2">
				<input type="button" value="提交">
			</td>
		</tr>
	</table>
</body>
</html>

运行结果：

HTML5中常见表单标签

表单标签最好放在form中

input：这个标签常见属性有type，name和value

type常见值：text（文本框），password（密码，输入值会隐藏），checkbox（复选框），radio（单选框，但是要将单选内容的name保持一致），file（文件上传），color，number，date，button，submit（提交），reset（重置）等

select：下拉框标签，此标签和option标签配合使用
textarea：文件域标签，可以用作留言板，其中cols控制宽度，rows控制高度

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单标签</title>
</head>
<body>
	<form>
		用户名：<input type="text"><br>
		密&nbsp;码：<input type="password"><br>
		兴趣爱好：<input type="checkbox">篮球<input type="checkbox">足球<br>
		性别：<input type="radio" name="gender">男<input type="radio" name="gender">女<br>
		文件上传：<input type="file"><br>
		日期：<input type="date"><br>
		颜色：<input type="color"><br>
		数值选择：<input type="number" max="5" min="-1">
		按钮：<input type="button" value="登录">
	</form>
</body>
</html>

运行结果