【Web-HTML基础】创建HTML页面、列表标签、超链接a、表格标签table、CSS、form表单、选择器

最新推荐文章于 2024-01-29 02:43:59 发布

居然天上楼

最新推荐文章于 2024-01-29 02:43:59 发布

阅读量413

点赞数 1

分类专栏：前端知识点文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_72612071/article/details/127621662

版权

前端知识点专栏收录该内容

14 篇文章 0 订阅

订阅专栏

HTML

作用: 搭建页面结构 , 类似盖房子(毛坯房)
HyperTextMarkupLanguage 超文本标记语言
标记语言格式:<开始标签属性='值'>标签体</结束标签>
超文本: 指不仅仅是纯文本,还包括字体相关和多媒体相关(音频,视频,图片)
学习HTML主要学习的就是有哪些html标签,以及用法

创建HTML页面

文本相关标签

内容标题h1-h6

数字越小字越大, 字体加粗,自带上下间距, 独占一行
换行 br
水平分割线hr
段落标签p

独占一行, 自带上下间距
加粗b
斜体i
下划线u
删除线s

列表标签

无序列表: ul li
有序列表: ol li
列表嵌套: 有序列表和无序列表可以任意无限嵌套

图片标签img

src: 资源路径
- 相对路径: 访问站内资源使用
  - 图片和页面同级目录:直接写图片名
  - 图片在页面上级目录: ../../图片名
  - 图片在页面下级目录: 文件夹名/图片名
- 绝对路径:访问站外资源使用,称为图片盗链
alt: 图片不能正常显示时显示的文本
title:图片标题, 鼠标在图片上悬停时显示的文本
width/height:设置宽高, 两种方式: 1. 像素 2. 百分比 , 如果只设置宽度高度会自动等比例缩放

超链接a

href: 资源路径,作用和src类似
a标签包裹文本为文本超链接,包裹图片为图片超链接
页面内部跳转: 在href属性中添加#xxx 在目的地元素的里面添加id属性值为xxx

表格标签table

相关标签: 表格table tr表示行 td表示列 th表头 caption表格标题
相关属性: border边框 colspan跨列 rowspan跨行

form表单

作用: 获取用户输入的内容并提交给服务器

相关代码:

<form action="http://www.baidu.com">
    
    用户名:<input type="text" name="username" value="tom"
               placeholder="请输入用户名" maxlength="5" readonly><br>
    
    密码:<input type="password" placeholder="请输入密码" name="password"><br>
    
    性别:<input type="radio" name="gender" value="m">男
    <input type="radio" name="gender" checked value="w">女<br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    
    生日:<input type="date" name="birthday"><br>
    
    靓照:<input type="file" name="pic"><br>
    
    所在地:<select name="city">
    
        <option value="bj">北京</option>
        <option selected>上海</option>
        <option>广州</option>
    </select><br>
    <input type="submit" value="注册">
    <input type="reset">
    
    <input type="button" value="自定义按钮">
    <button type="submit">注册</button>
    <button type="reset">重置</button>
    <button type="button">自定义按钮</button>

</form>

分区标签

作用: 将多个有相关性的标签添加到一个分区标签里面, 便于统一管理
常见的分区标签:
- div: 独占一行
- span: 共占一行
HTML5的版本中新增了一些分区标签,这些标签的作用和div一样,为了提高代码可读性
- header 头
- main 主体
- footer 脚
- nav 导航
- section 区域

CSS

Cascading Style Sheet:层叠样式表
层叠样式表, 作用:美化页面, 相当于装修
通过CSS样式相关代码对页面进行美化

如何在html页面中添加css样式代码

三种添加方式(引入方式)
- 内联: 在标签的style属性中添加样式代码, 不能复用
- 内部: 在head标签里面添加style标签, 标签体内写样式代码, 可以复用,但不能多页面复用
- 外部: 在单独的css样式文件中写样式代码,在html页面中通过link标签引入,可以实现多页面复用, 而且可以将html代码和css样式代码分离开便于维护

<link rel="stylesheet" href="my.css">

选择器

作用: 通过选择器找到页面中的元素, 找到后再添加样式代码

标签名选择器, 匹配页面中所有同名标签

格式: 标签名{样式代码}
id选择器: 当需要选择页面中某一个元素时使用

格式:#id{样式代码}
类选择器: 当需要选择多个不相干的元素的时使用

格式:.class{样式代码}
分组选择器: 将多个选择器合并成一个选择器

格式: div,#id,.class{样式代码}
属性选择器:通过元素的属性选择元素

格式:标签名[属性名='值']{样式代码}
任意元素选择器:匹配所有元素

格式:*{样式代码}
子孙后代选择器: 通过元素之间的层级关系选择元素

格式:body div div p{样式代码} 匹配的是body里面的div里面的div里面的所有p(包含后代)
子元素选择器:通过元素之间的层级关系选择元素

格式:body>div>div>p{样式代码} 匹配的是body里面的div里面的div里面的所有p子元素(不包含后代)
伪类选择器: 选择的是元素的状态,包括:未访问,访问过,悬停,点击

格式: a:link未访问/visited访问过/hover悬停/active点击或激活{样式代码}

/*未访问*/
a:link{color: red}
/*访问过*/
a:visited{color: green}
/*悬停*/
a:hover{color: yellow}
/*点击/激活*/
a:active{color: blue}

通过内部样式实现以下效果

把张学友改成绿色
把刘德华和悟空改成蓝色
修改取经 3 人和刘备的

背景为黄色
修改提交按钮的背景为红色,

自定义按钮的字为粉色
给所有元素添加红色的边框

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    #zxy{color: green}
    .c1{color: blue}
    h1,h2{background-color: yellow}
    input[type='submit']{background-color: red}
    input[type='button']{color: pink}
    *{border: 1px solid red}
</style>
</head>
<body>
<ul>
<li id="zxy">张学友</li><li class="c1">刘德华</li><li>郭富城</li>
</ul>
<h1 class="c1">悟空</h1><h1>八戒</h1><h1>唐僧</h1>
<h2>刘备</h2>
<input type="submit">
<input type="button" value="按钮">
</body>
</html>