标签:文件夹 程序 ash 属性 cal 代码提示 text sha red
HTML基础
一:基础
HTML(Hyper Text Markup Language):超文本标记语言
目前学习最新的版本:HTML5.
优点:1,智能代码补全 2,代码提示 3,自动保存 4,多个浏览器支持
用来表达网页而用来编辑的程序:nootpad,写字板,记事本,webstrom
W3C:外围网联盟
W3C标准:
HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
开始工作:
File----new---HTML file(建立一个html文件)
File----new---direction(建立一个文件夹)
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题(h1-h6都是标题标签,h1字体最大,h6字体最小)
<p> 与 </p> 之间的文本被显示为段落
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。
文本样式:
水平线:<hr> --------------------------------------------------------------------------
<em>斜体</em> <em>我的世界</em> 我的世界
<Strong>加粗</Strong> <Strong>我的世界</Strong> 我的世界
标签属性:
添加图片:语法:<img src="相对路径/绝对路径" >(现在多用相对路径)
../用于返回上一级 ../../用于返回上一级的上一级
超链接文本:用a标签 语法:<a href="">内容</a> 出现的是:内容
注:英文“”中间可以用自身窗口(self):就是在原本的网页打开你想要的内容
也可以用新建窗口(blank):就是原本的网页不变,新建一个网页窗口
添加视频:语法:<video src="相对路径" controls></video> 里面的相对路径和上面相同的道理,controls这个是视频的功能键,加上这个会看到这个视频的播放,快进,音量等功能键。
添加音频:语法:<audio src="相对路径" controls></audio> 同上。
Source :标签
Src: 属性
autoplay :自动播放
注释和特殊符号:
空格: ;
大于号:>; 内容+符号+内容
小于号:<; 内容+符号+内容
引号:"; 必须用承兑的";引起来
版权符号:©;
二:属性:
header 标题头部内容----------------页面中的一块
footer 脚部区域内容-----------------整个页面
section web页面一块独立区域
article 独立文章内容
aside 相关内容-------------------------侧边栏
nav 导航类辅助内容
内容属性:style:
设置边框尺寸:width宽 height 高
font-family:字体 font-family:楷体; 宋体:(我的世界)楷体(我的世界)
font-size:大小 font-size:20px; 我的世界(字体默认大小为16px)
font-style:风格 font-style:italic;(斜体) 我的世界(默认为normal:正常)
font-weight:粗细 font-weight:200px; 我的世界(输入的数字为1-900正整数)
Color:颜色 color:red 我的世界
注:color后面有三种表达方式:1,英文red 2,十六进制# 3,RGB三原色设置
文本属性:
text-align:对齐方式 center居中 right偏右 left偏左
text-indent:首行缩进 一般用10px,如果是在段落中用2em。
line-hight:行高
text-decoration:文本装饰 underline下划线 line-through中划线 overline上划线
None没有
Padding 内边距 margin 外边距
伪类语法:
a:hover{
Cursor:
}
Cursor鼠标 water 等待 move 移动 pinter 小手 crosshair 十字光标 alias 跳转
All-scroll 移动 auto 文本符
Div标签
Background:背景
Background-color颜色
Background-repeat:是否平铺
Background-position:背景定位
Background-image:ur”相对路径”
去小圆点:
*{
Padding:0;
Magrin:0
}
line-height:30px;设置行高,这样可以让内容居中
text-decoration:none;这样去下划线
三:列表
列表:
无序列表:
<ul>
<li>1</li> ·1
<li>2</li> ·2
<li>3</li> ·3
</ul>
有序列表:
<ol>
<li>桔子</li> 桔子
<li>香蕉</li> 香蕉
<li>苹果</li> 苹果
</ol>
自定义列表(现在不用)
<dl>
<dt>所属学院</dt>
<dd>计算机应用</dd>
<dt>所属专业</dt>
<dd>计算机软件工程</dd>
</dl>
表格的语法:
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
……
</tr>
……
</table>
补充type=squarc正方块 circle 空心圆
Table表格容器: tr行 td列
Rowspan行合并 colspan列合并
表单的结构:
姓名:<input type="text"><br> text文本框
信息:<input type="text"><br>
密码:<input type="password"><br> password密码框
<input type="radio" name="sex" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
Radio单选框 label是如果点在字上也能选中。
<input type="checkbox" id="tile"><label for="tile">同意此协定</label>
Checkbox同意框
<select name="" id="">
<option value="">请选择</option>
<option value="">事业部</option>
<option value="">技术部</option>
<option value="">人事部</option>
<option value="">财务部</option>
</select>
Select这个结构是用来选择
<input type="submit" value="登陆">
<button>登陆</button>
登陆注册框的两种不同写法
<textarea name="" cols="30" rows="10"></textarea><button>提交</button>
评论框
四:选择器:
并集选择器:多个选择器通过逗号连接而成,同时声明多个风格相同样式。
交集选择器:由两个选择器连接构成,选中二者范围的交集,两个选择器之间不能有空格。
第一个必须是标签选择器,第二个必须是类选择器或者ID选择器。
后代选择器:外层的选择器写在前面,内层的选择器写在后面,之间用空格分隔标签嵌套时,内层的标签成为外层标签的后代。
子元素选择器:通过>连接在一起而成,仅作用于子元素。
属性选择器:选取带有指定属性的元素,或选取带有指定属性和值的元素。
盒子类型:
上边框样式:border-top-style
右边框样式:border-right-style
下边框样式:border-bottom-style
左边框样式:border-left-style
设置四个边框样式:border-style
none:无边框
solid:实线边框
dashed:虚线边框
dotted:点状边框
double:双线边框
hidden:与none相同,应用于表解决边框冲突
标签:文件夹 程序 ash 属性 cal 代码提示 text sha red
原文地址:https://www.cnblogs.com/liurui-bk517/p/11074047.html