HTML和CSS初步学习

一

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

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

2. 网页开发工具

（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）无序列表

 
"列表项符号">
    
无序列表项
    
无序列表项
    
无序列表项

（2）自定义列表

    

    
定义名词
    
定义描述
    ……

（3）表格基本语法

  

    
表格标题
    
    

        

            
表头单元格1
    
表头单元格2
        
    
    
    

        

            
标准单元格1
            
标准单元格2
        
        

            
标准单元格1
            
标准单元格2
        
    
    
    

        

            
标准单元格1
            
标准单元格2
        
    

（4）合并
行：
列：
（5）图像

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

（6）超链接

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

（7）表单
单行文本框

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

密码文本框

"password">

多行文本框

"行数"</span> cols=<span class="token string">"列数"</span>>多行文本框内容

下拉列表

"mutiple" size="可见列表项的数目">
    "选项值" selected="selected">选项显示的内容
    ……
    "选项值">选项显示的内容

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

 
  
    
      
" " rel=" " type=" " />

   
       

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

  

  
      
      
  
 
    
   //在


    
1
    
2
    3
    
4

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

…
  
…

(3)id选择器

 


    
666 
    
"lvye">666
    
666 

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{}