Web.course
2019-05-09 14:05:49 0 举报AI智能生成
零基础HTML初学脑图，CSS后续补充中
作者其他创作
大纲/内容
HTML
语法:标签<x></x>
head里面有个title改网页标签
<p></p>分段，在里面可以编辑居中等
标题h1-h6
列表
<ul>代表无序，前面是圆点
<ol>代表有序，前面是1234
去圆点或序号在<style>里写list-style：none
<ol>代表有序，前面是1234
去圆点或序号在<style>里写list-style：none
例：
<style>
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>haha</li>
<li>heihei</li>
</ul>
<ol>
<li>xixi</li>
<li>coco</li>
</ol>
</body>
<style>
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>haha</li>
<li>heihei</li>
</ul>
<ol>
<li>xixi</li>
<li>coco</li>
</ol>
</body>
转义字符
  空格
&le 小于等于号
浮动float：left
块级变内联display：inline-block；
块级变内联display：inline-block；
<img>插入图片
插入图片，直接在后面加src，选择图片源，
加height和width调整高和宽，单位px（像素），
alt是图片丢失时显示的信息，title，为鼠标停在图片上时显示的标签
例：
加height和width调整高和宽，单位px（像素），
alt是图片丢失时显示的信息，title，为鼠标停在图片上时显示的标签
例：
例：
<body>
<img src="../img/18990764834984142.jpg" />
<img src="../img/18990764834984142.jpg" height="200px" width="100px"/>
</body>
<body>
<img src="../img/18990764834984142.jpg" />
<img src="../img/18990764834984142.jpg" height="200px" width="100px"/>
</body>
表单，即账号密码格
<input type=
要用<form></form>标签包上
才是一个表单，里面的信息才能提交
要用<form></form>标签包上
才是一个表单，里面的信息才能提交
“text”输入文字，placeholder，灰字提示备注，如：请输入账号
“password”密码类，输入后不显示，为小圆点
“button” value=“登陆”
“submit”，“提交”
“radio” name=“sex”/>男
“radio” name=“sex”/>女
必须限定名字为同一个，才不能进行多选
也可以用<label>
“radio” name=“sex”/>女
必须限定名字为同一个，才不能进行多选
也可以用<label>
“checkbox”方格画√
input字句前后加<label></label>
才能形成点字就可以触发打钩，否则必须点方框位置
input字句前后加<label></label>
才能形成点字就可以触发打钩，否则必须点方框位置
表格
要在body里写上<table border=“1px”>，
<tr>是行，<td>是列
rouspan是合并行，colspan是合并列
<tr>是行，<td>是列
rouspan是合并行，colspan是合并列
例：
<body>
<table border="1px">
<tr>
<td rowspan="2">用户名</td>
<td>密码</td>
<td>验证码</td>
</tr>
<tr>
<td>123</td>
<td>456</td>
</tr>
</table>
</body>
<body>
<table border="1px">
<tr>
<td rowspan="2">用户名</td>
<td>密码</td>
<td>验证码</td>
</tr>
<tr>
<td>123</td>
<td>456</td>
</tr>
</table>
</body>
元素分类
块级元素
新行开始
高宽可设
宽度缺省是容器的100%
可容纳内联元素和其他块元素
内联元素
和其他元素都在一行上
高宽不可设
只能容纳文本或其他内联元素
<a>标签跳转网页，
_blank _self在新网页中打开或原页面打开
要写target
要写target
例：
<a href=http://www.baidu.com target="_blank">跳转到百度</a>
<a href=http://www.baidu.com target="_blank">跳转到百度</a>
跳到最后一段，要在最后一段上面建<a>标签，第一个<a>里面写name=“lastcontend”
在要点击的<a>标签里写href=“#lastcontend”，注意写#
在要点击的<a>标签里写href=“#lastcontend”，注意写#
例：
<body>
<a href="#last">转到页尾</a>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<a name="last">
<p></p>
</body>
<body>
<a href="#last">转到页尾</a>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<a name="last">
<p></p>
</body>
块级及内联可用
display：inline-block
合并优缺点，出现在一行上
可以当浮动用
display：inline-block
合并优缺点，出现在一行上
可以当浮动用
CSS
color
rbg
rbga
#xxyyzz
color_name
渐变色
linear-gradient
radial-gradient
选择器
标签选择器
class选择器
Id选择器
后代选择器
nth选择器
组合选择器
文字
font-size
color
font-weight
text-shadow
font-family
text-indent
伪类
a:link /*未被访问的链接*/
a:visited /*已被访问的链接*/
a:hover /*鼠标指针移动到连接上*/
a:active /*正在被点击的链接*/
focus /*点击完后色块停留在上面*/
图片格式
jpg
png
svg
webp
框模型
margin
padding
定位
relative /*相对定位*/
absolute /*绝对定位*/
fixed
static
动画
过渡
@keyframes
弹性布局
背景
background-image
background-repeat
background-size
边框
圆角工具
框阴影
转换
translate
rotate
scale
iframe
scrolling：no；
收藏
0 条评论
下一页
为你推荐
查看更多
