HTML和CSS初步学习

Xinxin Xiangrong

已于 2022-02-12 23:22:10 修改

阅读量8.3k

点赞数

分类专栏：笔记文章标签： html css

于 2022-02-12 23:14:29 首次发布

本文链接：https://blog.csdn.net/m0_63195227/article/details/122903500

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一

Web标准提出的最佳体验方法：结构，样式，行为相分离
简单理解：结构写到HTML中，表现写到CSS中，行为写到javascript中
（1） HTML语法规范
标签一般要成对出现。
Eg
双标签可以分为包含关系和并列关系
（2） HTML 基本结构标签

第一个页面 ---- !!文档后缀名必须是html （3）开发工具—vscode 创建（ctrl+N）保存（ctrl+S）生成页面骨架结构（！+tab）

网页开发工具

（1） <！DOCTYPE>标签：告诉浏览器使用哪种HTML版本来显示网页要位于文档中最前面的位置
（2） Lang语言种类 en定义为英语 zh-CN定义为中文
（3）字符集—在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码
（4） HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
块元素特点：
独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
行内元素特点：
可以与其他行内元素位于同一行；
行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等。

3.常用标签

（1）段落与文字在这里插入图片描述
（2）文本化格式

二

**1.**总结一下常用标签
在这里插入图片描述
2. 重要语法
（1）无序列表

 <ul  type="列表项符号">
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>

（2）自定义列表

    <dl>
    <dt>定义名词</dt>
    <dd>定义描述</dd>
    ……
</dl>

（3）表格基本语法

  <table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
    <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tfoot>
</table>

（4）合并
行：<td rowspan="跨度的行数">
列：<td colspan="跨度的列数">
（5）图像

< img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">

（6）超链接

<a href="链接地址" target="目标窗口的打开方式">

（7）表单
单行文本框

<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>

密码文本框

<input type="password">

多行文本框

<textarea rows="行数" cols="列数">多行文本框内容</textarea>

下拉列表

<select multiple="mutiple" size="可见列表项的数目">
    <option value="选项值" selected="selected">选项显示的内容</option>
    ……
    <option value="选项值">选项显示的内容</option>
</select>

3. css学习
–用于美化和布局网页
1.语法规范
外部样式

<!DOCTYPE html>
 <html>
 <head> 
    <title></title>
      <!--在HTML页面中引用文件名为index的css文件-->
<link href=" " rel=" " type=" " />
</head>
<body>   
       <div></div>
</body>
</html>

在head标签中使用link
内部样式

  <!DOCTYPE html>
<html>
<head>  
  <title></title>    
  <!--这是内部样式表，CSS样式在style标签中定义-->    
  <style type=" ">
          p{color:  ;}      
   </style>
 </head>
 <body>   
 </body>  //在<style>标签内定义，而<style>标签必须放在<head>标签内
 <css规则主要由选择器以及一条或多条声明构成>

在这里插入图片描述
ps:语法和c相似，一定要加“； “
（1）代码风格—展开式
eg h3{
Color: ;
Font-size: ;
}
（2）关键词用小写
（3）属性值前冒号后保留空格；选择器和大括号保留空格
2.选择器
（1）标签选择器
以html标签作为选择器

<!DOCTYPE html>
<html xmlns="   ">
<head>
    <title></title>
    <style>
        div{color:red;}
    </style>
</head>
<body>
    <div>1</div>
    <p>2</p >
    <span>3</span>
    <div>4</div>
</body>
</html>

（2）类class选择器
类名{
.属性1:属性1；
…
}

<style>
  .red{
          color: red;
   }
</style>


…
  <li class=”red”>…</li>

(3)id选择器

 <style>
        #lvye{
color: red;
}
  </style>
</head>
<body>
    <div>666 </div>
    <div id="lvye">666</div>
    <div>666 </div>
</body>

Ps：#定义，结构id调用，只能调用一次
3.文本样式
在这里插入图片描述
Font-style属性

在这里插入图片描述
Eg font-style:italic;
注释：
/注释的内容/
1． text-decoration：属性值；

2. text-transform：属性值；

在这里插入图片描述
3. font-variant：normal/small-caps;
4. text-indent:像素值;
5. text-align:属性值;

在这里插入图片描述
6.行高 line-height:像素值;
7. letter-spacing:像素值;
8. word-spacing:像素值;
4.边框样式

在这里插入图片描述
5.背景样式
背景颜色—background-color:颜色值
背景图像–
background- image：URL（“图像地址”）
background-position取值为关键字

在这里插入图片描述

在这里插入图片描述
6.超链接样式
除去超链接下划线。text-decoration:none;
Hover伪类
元素(任意块元素和行内元素)：hover{}

Xinxin Xiangrong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML和CSS初步学习

Web标准提出的最佳体验方法：结构，样式，行为相分离简单理解：结构写到HTML中，表现写到CSS中，行为写到javascript中（1） HTML语法规范标签一般要成对出现。Eg 双标签可以分为包含关系和并列关系（2） HTML 基本结构标签第一个页面 ---- !!文档后缀名必须是html（3）开发工具—vscode创建（ctrl+N）保存（ctrl+S）生成页面骨架结构（！+tab）2. 网页开发工具（1） <！DOCTYPE&gt.
复制链接

扫一扫