文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

html css基础知识点有哪些

2024-04-02 19:55

关注

今天小编给大家分享一下html css基础知识点有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

HTML

网页构成

摘要 说明
结构(HTML) HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
表现(CSS) CSS样式是表现。就像网页的外衣。比如,字体、颜色变化,或为加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
行为(JavaScript / jQuery) JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有购物网站中图片的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的

HTML文件结构

标签语法

常用标签

<h2>...</h2>
<br /> 换行
<hr /> 分割线
<p>...</p> 段落
<span></span> 行内
<img src="" /> 图片
<a href=""></a> 超链接
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<li>...</li> 列表项
<table>...</table> 表格
<tr>...</tr> 一行
<td>...</td> 一列
<th>...</th>
<form>...</form> 表单
<input> 输入框
<select>...</select> 下拉列表
<option>...</option> 下拉选项

属性

align="left"                   【align="center",align="right"  左中右】

style="background-color: red"           【样式】

<img alt="加载失败提示" src="../网络/本地路径" border="边框" width="100px" height="120" />【宽高只设置一项即可,另一项会自适应】

<a href="../网络/本地路径" target="_self">    【" target="_blank"在新窗口打开,默认原窗口打开】

列表

<ul type="square">
  <li>...</li>
  <li>...</li>
</ul>

在ul标签中添加属性 type="" circle 空心圆,disc 实心圆 (默认),square 实心方块
在ol标签中添加属性 type="1/a/A/i/I"

表格

<table>
  <tr>        【行】
    <th></th>  【列】
  </tr>
  <tr>
    <td></td>  【列】
  </tr>
</table>

table标签中可以声明的属性
  border=""    表格的边框
  width=""      表格的宽度
  height=""     高度
  align=""       表格的对其方式
  bgcolor=""   背景颜色
td标签内定义对齐方式的属性
  align=""       设置当前单元格水平对齐
  valign=""     设置当前单元格垂直对齐
  bgcolor=""     设置背景颜色
合并单元格
     rowspan="    合并单元格的个数      合并行
  colspan="   合并单元格的个数    合并列

 表单

<form action="提交的路径" method="get/post">

  <input type="text" name="文本框" value="默认值"/>

  <input type="password" name="密码框" value="默认值"/>

  <input type="radio" name="单选框" value="..." checked="默认选择">

  <input type="checkbox" name="复选框" value="..." checked="默认选择">

  <select name="下拉列表">
    <option value="china" selected="默认选择">中国</option>
  </select>

  <input type="hidden" name="隐藏域" value="..."> 

  <input type="button"name="button" value="普通按钮"> 

  <input type="reset" value="重置按钮">

  <input type="submit"name="提交按钮" value="...">

</form>

 提交时以key:value形式,其中文本框、密码框的key为name 值为提交数据

             其中单选框、复选框、隐藏域、提交按钮key为name 值为value

            下拉列表name在select标签value在option标签提交时同上key为name值为value

 常规属性

id:  标签的唯一编号,识别码

class :   标签的分类,用来识别一组标签。

style:  标签的风格、样式

p,form,ol,ul,li,dl,dt,dd,h4{margin:0;padding:0;list-style:none} 样式清除

事件属性

CSS

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML元素(或内容)在浏览器内的显示样式

语法

CSS样式由选择符(选择器)和声明组成,而声明又由属性和值组成

html css基础知识点有哪些

语法说明

编写位置

方式一:写在标签的style属性中

<p style=“font-size:30px”>字体大小用px表示</p>

方式二:写在html头的style标签中(style标签一般写在head标签与title标签之间)

<style type="text/css">
    p{
        background-color: yellow;
    }
</style>

方式三:写在外部的css文件中,然后通过link标签引入外部的css文件

<link rel="stylesheet" type="text/css" href="style.css">

优先级按照上述讲的三种方式依次降低

选择器

标签选择器:标签名        <html的标签如:div>

id选择器:#id(名)         <p id="属性名">

类选择器:.class(名)            <p class="属性名">

组选择器:选择器1,&hellip;      【同时使用多个选择器选中一组元素,使用,分隔】

派生选择器:选择器1 选择器2 &hellip;  【根据上下文关系,选择元素的后代元素,使用空格隔开】

常用样式

颜色:color:red;或  #00F6DE

宽度:width:20px; 或  %20

高度:height:20px;  或  %20

背景颜色:background-color: #00F6DE

字体大小:font-size:20px;

文本居中:text-align:center;

div居中:margin-left:auto;  margin-right:auto;

1px实线边框:border:1px solid;

 列表去修饰:ul{list-style:none;}

以上就是“html css基础知识点有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯