软件园学生在线

  • {{ item.name }}
  • 2023试用期

登录与注册

【第一次前端培训】html与css初步

  • 李彦欣
  • 2022-10-16
  • 0

前端第一次培训-简单html与css初步

学习资源：培训视频+黑马程序员+w3school+csdn

一.html

1.简单语法规范

  • 标签

    尖括号包围的关键词

  • 双标签：

    开始标签 <html>
结束标签</html>

  • 单标签：

<br />
  • 标签关系
包含关系
<head>
    <title></title>
</head>
并列关系
<head></head>
<body></body>

2. 基本结构标签

根标签<html></html>
头部标签<head></head>
文档/网页标题<title></title>
文档主体<body></body>

3. 文档类型声明标签

<!DOCTYPE html>告诉浏览器当前页面采取最新html来显示
- 语言种类
en为英语，zh-CN为中文，fr为法文
<html lang="en">
字符集:存储文字
<meta charset="UTF-8"/>

GB2312简体中文，BIG5繁体中文，GBK简繁均有，UTF-8万国码

4. 段落与文字

标题标签head(每个标题独占一行)
<h1>我是一级标题</h1>
段落标签paragraph<p>我是一个段落标签</p>
换行标签break(单标签)<br />
文本格式化标签：
粗体<strong></strong>或<b></b> 
斜体<em></em>或者<i></i> 
下划线<ins></ins>或者<u></u> 
删除线<del></del>或者<s></s>
无语义，用来布局：分割(可看作一个大盒子)<div></div>
跨度(看作小盒子)<span></span>

5.图像

图像标签(单标签)<img scr="图像URL"/>
src 图片路径 必须属性
alt 文本 替换文本。图像不能显示时出现的文字
title 文本 提示文本。鼠标放到图像上，显示的文字
注意：属性要写在标签后面；属性间不分前后顺序，但要有空格分开；key="value",属性="属性值"

  • 路径：

    相对路径:（以图片位置为参考）

同一级路径：<img src="1.png">；
下一级路径<img src="images/1.png"/>
上一级路径<img src="../../1.png">

​

​ 绝对路径:从盘符开始的路径或完整的网络地址

6.链接

超链接标签anchor<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：必须属性，用于指定链接目标的url地址
target用于指定链接页面的打开方式_self默认值_blank在新窗口中打开
  • 连接分类
1.外部链接(必须以http://开头)
<a href="http://www.qq.com" target="_self">腾讯</a>
2.内部链接(直接接内部页面名称)
<a href="hh.html" taget="_blank">haihai</a>
3.空链接(没有确定链接目标时)
<a href="#">空链接</a>
4.下载链接(href里面的地址是文件或压缩包时会下载文件)
5.网页元素链接
<a href="http://www.baidu.com"><img src="1.png"/></a>
5.锚点链接(快速定位到网页的某个位置)
①href属性<a href="#名字">第二集</a>
②目标标签标题中加入id属性=名字<h2 id="名字">第二集</h2>

7.特殊字符

注释标签：<!--注释内容-->
特殊字符
描述 字符的代码 
空格符  

8.表格

表格标签<table></table>
行标签<tr></tr>
单元格标签<td></td>
表头单元格标签(加粗居中)<th></th>
表格属性(css来完成)

表格结构标签
头部<thead></thead>
主体<tbody></tbody>

合并单元格
跨行合并:rowspan="合并单元格的个数"
跨列合并:colspan="合并单元格的个数"
目标单元格(书写合并代码)
跨行：最上面的单元格
跨列：最左侧的单元格

9.表单

表单标签(收集用户信息)
表单域<form action="url地址" method="提交方式" name="表单域名称"></form>
属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
method get/post 用于设置表单数据的提交方式，其取值为get或post。
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域。

表单元素
1.input输入表单元素
<input type="属性值" />
属性值 描述
checkbox 复选框。
password 密码字段，输入密码时被掩盖
radio 单选按钮。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20个字符。

其他属性：
属性  属性值  描述
name 由用户自定义 定义input元素的名称。
value 由用户自定义 规定input 元素的值。
checked checked 规定此input 元素首次加载时应当被选中。
maxlength 正整数 规定输入字段中的字符的最大长度。

label标签
绑定一个表单元素，当点击<lable>标签内的文本时，光标会选择对应的表单元素
<input type="radio" id="nan"><label for="nan">男</label>
<label for="username">用户名</label><input type="text" id="username">

2.select下拉表单元素
<select></select>至少包含一对<option></option>
默认选中项：option标签中添加属性selected="selected"
可见列表项的数目select标签中添加属性size="数目"
<select size="数目">
    <option selected="selected"></option>
    <option></option>
    <option></option>
</select>

3.文本域表单元素
属性(css)：cols="每行的字符数"
rows="行数"
<textarea>
    请在此输入xxx
</textarea>

10.列表

无序列表(ul里只能放li，li里可以放任何元素)<ul><li></li></ul>
有序列表(ol里只能放li，li里可以放任何元素)<ol><li></li></ol>
自定义列表<dl>
           <dt></dt>
           <dd></dd>
        </dl>

二.css

1.基本语法

选择器{属性=”属性值“}

注释/ /

2.选择器

  • 标签选择器 标签名div {color: red}

  • 类选择器 .类名 {color: red} class="类名"

    多类名：class="类名1 类名2"

  • id选择器 #id名 {}

    只能调用一次

  • 子元素选择器：#father #p1{color：red} 父元素与子元素用空格隔开

  • 相邻选择器：#lv+div{color:red}

  • 群组选择器：h1,div,p{color:red}

3.文本样式

  • font-family: 字体类型(宋体，微软雅黑... )
  • font-size: 像素(15px)
  • font-weight: 粗细(bold,normal)
  • sont-style: 斜体(normal,italic,oblique)
  • color: 字体颜色(red,black)

4.段落样式

  • text-decoration: 文本格式(none,underline,line-through,overline)
  • text-transform: 大小写转换(none,uppercase,lowercase,capitalize)
  • font-variant: (normal,small-caps)
  • text-indent: 像素值
  • text-align: 对齐方式(left,center,right)
  • line-hight: 行高(5px)
  • letter-spacing: 字间距(2px)（不常用）
  • word-spacing: 词间距(3px)

5.边框样式

  • border-width: 边框宽(1px)

  • border-style: 边框样式(solid,dashed)

  • border-color: 边框颜色(red)

  • 简写：border: 1px solid grey;

  • 局部样式：border-top(botton/right/left): 1px solid grey;

6.背景样式

  • background-color: 背景颜色(white)；
  • background-image: 图像路径(images/1.png)
  • background-repeat: 显示方式(no-repeat,repeat,repeat-x,repeat-y)
  • background-position: 图像位置(top left/center/right,bottom left/center/right,left/center/right center)
  • background-attachment: 滚动/固定(scroll/fixed)

7.超链接样式

  • text-decoration: 去除下划线(none)
  • 超链接伪类:

a: link{}

a: visited{}

a: hover{}

a: active{}

a: hover{}

8. hover伪类

定义元素在鼠标经过时的样式

img: hover{}

.class: hover{}

9. 图片样式

  • width: (200px)
  • height: (200px)
  • border: 1px solid grey;
  • text-align: 水平对齐方式(left center right)

10.列表样式

  • 有序列表：list-style-type: decimal/lower-roman/nupper-roman/lower-alpha/nupper-alpha;

  • 无序列表: list-style-type: disc/circle/square;

  • 去除样式: list-style-type: nine;

11.表格样式

  • border-collapse: 边框分开/合并(separate/collapse)
  • border-spacing: 边框间距（一个值：横竖均是；两个值：先横后竖）(2px)(2px,1px)

三. 感受

1.html语法是真简单，属性是真难记（哭，不过应该专门不用记，用多了就好）

2.关于作业：

1）首先先到了一些图片网站（花瓣，美叶，站酷）等观察了一下别人是怎么做的，发现了瀑布流这个高级的布局（发现超纲内容）。

2）然后在自己傻傻的用好多img标签进行操作之后发现网页并不能按照料想的方式进行排列，就接着进行一番搜索，发现可以使用无序列表来实现5x4的排列方式+底部文字的处理，故解决了图片和文字的排列问题，这个过程花费了很多时间。

3）关于鼠标停留时图片放大问题，根据提示学习了hover伪类，比较轻易的解决。

4）接着在w3school中的图片样式中学到了圆角等一些设置，并运用到了图片中，不过个人比较喜欢简洁的页面，所以对文字格式没有过多设置。

5）然后简单运用了一些htlm中的文字段落标签（指标题哈哈），表单中的checkbox，以及超链接标签（稍稍的用了一下）。

6）最后给自己的网页浏览器标题栏设置了一个小图标（ps画的，但是不知道为什么导出格式为png，可图标还是有白色背景？？）

3.还没来得及卷js应该不要紧吧（小声）不过挺想赶紧学js做更酷的动态网页！

3.几个崩溃瞬间：

1）当你使用css进行一系列调试但发现图片并不像你想象的样子排列之后......

2）给一个class设置style，但这个类里面只有个别的格式正确，其他却没反应，苦思冥想最后却发现是有的类在定义的时候把class写成了claas......

李彦欣
李彦欣
© 2024 软件园学生在线
Theme by Wing