HTML和CSS初步学习

  1. Web标准提出的最佳体验方法:结构,样式,行为相分离
    简单理解:结构写到HTML中,表现写到CSS中,行为写到javascript中
    (1) HTML语法规范
    标签一般要成对出现。
    Eg
    双标签可以分为包含关系和并列关系
    (2) HTML 基本结构标签
    HTML和CSS初步学习_第1张图片
第一个页面 ---- !!文档后缀名必须是html (3) 开发工具—vscode 创建(ctrl+N)保存(ctrl+S)生成页面骨架结构(!+tab)
  1. 网页开发工具

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

3.常用标签

(1)段落与文字HTML和CSS初步学习_第2张图片
(2)文本化格式
HTML和CSS初步学习_第3张图片

**1.**总结一下常用标签
HTML和CSS初步学习_第4张图片
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">

多行文本框


下拉列表


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


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

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

  
      
      
  
 
    
   //在


    
1

2

3
4

(2) 类class选择器
类名{
.属性1:属性1;

}

  • (3)id选择器

     
    
    
        
    666
    "lvye">666
    666

    Ps:#定义,结构id调用,只能调用一次
    3.文本样式
    HTML和CSS初步学习_第6张图片
    Font-style属性

    HTML和CSS初步学习_第7张图片
    Eg font-style:italic;
    注释:
    /注释的内容/
    1. text-decoration:属性值;
    HTML和CSS初步学习_第8张图片
    2. text-transform:属性值;

    HTML和CSS初步学习_第9张图片
    3. font-variant:normal/small-caps;
    4. text-indent:像素值;
    5. text-align:属性值;

    HTML和CSS初步学习_第10张图片
    6.行高 line-height:像素值;
    7. letter-spacing:像素值;
    8. word-spacing:像素值;
    4.边框样式

    HTML和CSS初步学习_第11张图片
    5.背景样式
    背景颜色—background-color:颜色值
    背景图像–
    background- image:URL(“图像地址”)
    background-position取值为关键字

    HTML和CSS初步学习_第12张图片

    HTML和CSS初步学习_第13张图片
    6.超链接样式
    除去超链接下划线。text-decoration:none;
    Hover伪类
    元素(任意块元素和行内元素):hover{}

    你可能感兴趣的:(笔记,html,css)