1.HTML基本结构
<html>
<head>
<meta name="xx" value="xxx"/>
<title>标题</title>
</head>
<body>
<!--注释-->
<h1>页面内容</h1>
</body>
</html>
2.前端开发工具
Webstrom、vsCode、HBuilder X
破解: 修改电脑时间 2034-10-25
双击: webstrom.exe 直接安装
安装结束后:把时间调整回来
3.HTML基本标签
标题标签: hx(1-6)
段落标签: p
加粗: strong
斜体: em
删除线:del
上下标: sup ,sub
分割线: hr
换行标签: br
超链接标签: a
-href: 打开的链接
-target: _self(本) _black(新)
内联框架: iframe
图片标签:img
-src:图片路径
-width:宽度
-height:高度
-title:标题
-alt:图片无法加载时文字内容
视频: video
音频:audio
列表标签
1.无序 ul->li
2.有序 ol->li
3.自定义 dl->dt->dd
表格标签:
1. table : 表格标签
2. tr: 行标签
3. td: 单元格
4. th: 表头
5. caption: 表格标题
属性:
border:边框
cellspacing:单元格外边距
cellpadding:单元格内边距
bgcolor:表格背景
rowspan:行合并
colspan: 列合并
-表单
1.表单标签
<form action="" method="">
</form>
注意
-action: 指定数据提交的服务器
-method: GET|POST
*GET: 不安全 , 效率高 , 数据长度不能超过3KB.
*POST: 安全 , 效率低 , 数据长度理论上无限制
作用:把数据以指定的方式提交给指定的服务器。
2.输入标签
<input type="" name="" value=""/>
type: 输入控件类型
-text(文本框) -password(密码框) -submit(提交) -reset(重置) -button(普通) -image(图片按钮)
-radio(单选) -checkbox(多选框)
name: 控件名称(key)
value: 控件的值
checked: 是否被选中
type: text、password、radio、chechbox、button、submit、reset、image
color date datetime datetime-local email month number
range search tel time url week
name: 控件名称,数据提交的key
value: 控件值,数据提交的value
min:最小值
max:最大值
step:步长
pattern:输入内容的格式规范(正则表达式)
readonly:只读
disabled:禁用
size:控件尺寸
placeholder:文字提示内容
maxlength:最大输入长度
required:是否必填
3.其他表单标签
<select name="">
<option value="" selected> 内容 </option>
....
</select>
<textarea rows="行" cols="列" name="key">
value
</textarea>
4.CSS: 级联样式表
网页构成 :W3C标准
-1.结构标准: HTML,XHTML
-2.表现标准: CSS
-3.动态标准: JavaScript,JQuery,Vue
样式使用
*行内样式
<h3 style="color:blue;font-size: 16px">怀化学院</h3>
*内部样式
<style type="text/css">
h3{
/*文本颜色*/
color : blue;
/*字体大小*/
font-size: 16px;
}
</style>
*外部样式
导入式:(部分浏览器不兼容)
<style type="text/css">
@import url("css/value.css");
</style>
链接式(推荐):
<link type="text/css" rel="stylesheet" href="css/value.css">
优先级: 就近原则
样式冲突:就近原则,不冲突:样式合并。
*基本选择器
选择器: 选择对应的元素设置对应样式效果。
语法:
选择器名称{
属性:属性值;
属性:属性值;
属性:属性值;
.....
}
5.基本选择器
-标签选择器
-类选择器: 类选择器可以被多个标签使用,一个标签也可以使用多个类选择器。
.name
-ID选择器:一个标签只能有一个ID选择器,一个ID选择器也只能被一个标签所使用。
#name
-通配选择器(*)
-群组选择器
选择器之间存在样式冲突(权值):id>类选择器>标签选择器>通配选择器