前端基础复习--HTML篇

html: html文件根标签

head:编写页面相关的属性

title:页面标题

body:页面内容展示信息

标题标签:h1 - h6,数字越大,字体越小 ,例如:

html 复制代码
<h1>hello</h1>

p标签:段落标签,回车换行会解析成空格

<br/>:换行标签

换行标签换行后间隙比段落标签间隙小

格式化标签:

  • 加粗:strong 标签和 b 标签
  • 倾斜:em 标签和 i 标签
  • 删除线:del 标签 和 s 标签
  • 下划线: ins 标签和 u 标签

img标签:

img标签必须带有 src 属性。表示图片的路径

html 复制代码
<img src="rose.jpg">

相对路径: ./xxx.png

./img/xxx.png 在某个文件夹下

../img/xxx.png

绝对路径:图片路径 网络上的图片

  • alt: 替换文本,当文本不能正确显示的时候,会显示一个替换的文字
  • title:提示文本,鼠标放到图片上,就会有提示
  • width / height:控制宽度高度,高度和宽度一般改一个就行,另外一个会等比例缩放。否则就会图片失衡
  • border:边框,宽度的像素,一般使用CSS来设定
html 复制代码
<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">

超链接标签:

  • href:必须具备,表示点击后会跳转到哪个页面
  • target:打开方式,默认是_self。如果是_blank则用新的标签页打开

链接也可以是图片,例如:

html 复制代码
<a>
    <img src="xxx.png" alt="">
</a>

表格标签:

  • table标签: 表示整个表格
  • tr:表示表格的一行
  • td:表示一个单元格
  • th:表示表头单元格,会居中加粗
  • thread:表格的头部区域(注意和 th 区分,范围是比 th 要大的)
  • tbody:表格得到主体区域

表格标签有一些属性,可以用于设置大小边框等,但是一般使用 CSS方式 来设置。

这些属性都要放到 table 标签中

  • align 是表格相对于周围元素的对齐方式,align="center"(不是内部元素的对齐方式)
  • border 表示边框。1表示有边框(数值越大,边框越粗),""表示没边框
  • cellpadding:内容距离边框的距离,默认1像素
  • cellspacing:单元格之间的距离,默认2像素
  • width / height: 设置尺寸
  • colspan**:** 单元格横向跨越的列数。
  • rowspan**:** 单元格纵向跨越的行数。

列表标签:

主要使用来布局的,整齐好看

输入的时候便捷方式:ul>li*2 (2表示总共几行)

  • 无序列表【重要】 ul li,
html 复制代码
<ul type="square">
    <li>这是内容1</li>
    <li>这是内容2</li>
</ul>
  • disc(默认值):使用实心圆(实心圆点)作为列表项标记。
  • circle:使用空心圆(空心圆点)作为列表项标记。
  • square:使用实心方块(实心方点)作为列表项标记。
  • 有序列表【用的不多】 ol li
html 复制代码
<ol type="a">
    <li>这是内容1</li>
    <li>这是内容2</li>
</ol>
  • a 表示小写英文字母编号
  • A 表示大写英文字母编号
  • i 表示小写罗马数字编号
  • I 表示大写罗马数字编号
  • 1 表示数字编号《默认》
  • 自定义列表【重要】 dl(总标签) dt(小标题) dd(围绕标题来说明)上面有几个围绕着标题来展开的。
html 复制代码
<dl>
    <dt>自定义列表标题</dt>
    <dd>咬人猫</dd>
    <dd>兔总裁</dd>
</dl>

**表单标签:**用来完成和服务器的一次交互

html 复制代码
<form action="">
    姓名<input type="text">
    <br/>
    密码<input type="password">
    <br/>
    性别<input type="radio" name="gender">男
    <input type="radio" name="gender" checked="checked">女
    <br/>
    爱好<input type="checkbox">吃饭
    <input type="checkbox">睡觉
    <input type="checkbox">玩游戏
    <br/>
    <input type="button" value="这是一个普通按钮" onclick="alert('hello')">
</form>

action后填服务器端的一个路由地址

  • 表单域:包含表单元素的区域,重点是form标签
  • 表单控件:输入框,提交按钮等,重点是input标签

可以通过对type进行对应的取值,来控制input类型。

text:单行输入

password:密码

radio:单选框 name="gender":只能单选一个 checked:默认选择

checkbox:复选框

button:普通按钮,搭配 JS 使用

提交/重置/上传文件 按钮:

action:后写提交到什么地方

html 复制代码
<form action="">
    课程:<input type="text" name="course">   
    <input type="submit">
    <input type="reset">
    <input type="file">
</form>

label标签:

搭配input使用,点击label也能选中对应的单选/复选框,能够提升用户体验

  • for属性:指定当前label和哪个相同id的Input标签对应,(此时点击才是有用的)
html 复制代码
<label for="male">男</label> 
<input id="male" type="radio" name="sex">
<label for="female">女</label> 
<input id="female" type="radio" name="sex">

点击 男/女 也可以选中按钮

select标签:

下拉菜单

  • option中定义 selected="selected"表示默认选中
html 复制代码
<select name="" id="">
    <option value="">--请选择年份--</option>
    <option value="" selected="selected">--1996--</option>
    <option value="">--1997--</option>
    <option value="">--1998--</option>
    <option value="">--1999--</option>
</select>

textarea标签:

html 复制代码
<textarea name="" id="" cols="30" rows="10"></textarea>

超过10行会出现滚轮,实际开发通过CSS实现效果

无语义标签:div & span

div:是独占一行的,是一个大盒子

span:不独占一行,是一个小盒子

特殊字符:

&nbsp;:空格

&lt;:小于号

&gt;:大于号

&amp;:按位与

相关推荐
EricWang135818 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning19 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人28 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.2 小时前
CSS3新增边框属性(五)
前端·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js