HTML、CSS学习笔记（一）

其实18年就学习过HTML和CSS，不够半途而废了，希望这一次可以走得更远。

b站 pink老师视频学习笔记

https://www.bilibili.com/video/BV14J4114768?p=22

编辑器操作
    ctrl+y 撤销
    文件+首选项   设置
    shift+end   从头部选中一行
    shift+home      头
    shift+alt+↓ 快速复制
    alt+↑或↓    快速移动

    千锋教育 P4
    tab+shift   向前缩进
    alt按住多光标
    ctrl+d 选择相同元素的下一个

P5
    HTML    结构
    CSS     样式
    JavaScript      动作

P8 黑马 HTML标签

<html> </html>
一般是双标签，单标签少
单 <br/>

<head></head>       头部
    <title></title>     标题
    <body></body>       主体

第一个！感叹号
新建文件 ctrl+N 保存成html

P12
<!DOCTYPE>文档类型申明标签，位于文档最前面不是HTML标签

lang语言   定义文档显示语言 zh-CN
    charset属性规定HTML文档使用哪种字符编码，charset="UTF-8"    UTF-8是万国码

    总结：     以上三个自动生成，但必须有

P14
标题标签<h1>-<h6> 重要

P15
段落标签 <p></p>
<br /> 换行标签，单标签

P17
    文本格式化标签——————粗体，斜体，下划线
    粗体 <strong></    或<b></
    斜体    <em></      或<i></
    删除线 <del></      或<s></
    下划线 <ins></       或<u></
    统一推荐用前一种标签

P18
<div>和<span> 没有意义，相当于一个盒子，用来装内容 division分割，span跨度

<div>用来布局，一个独占一行，是大盒子
    <span>用来布局，一行可以用多个，是小盒子

    P19     图像标签
    <img>用于定义图像
    <img src="图像URL"/>
    img的属性有：
    alt 替换文本
    title 提示文本，鼠标放图上，提示文本
    width   像素设置宽度
    height 像素设置高度
    border 像素设置图像边框粗细

#    <img src="陈攀证件照.jpg" />           图片和网页文件放在一起
    <h4>alt   图片显示不出来，用文字表示:</h4>
    <img src="img1.jpg" alt="证件照"/>
    src是必须属性     alt是替换文本    title是文字提示    border加图片边框

P21 图像标签注意
属性不分前后

P22 目录文件夹
VScode 打开文件夹

P23   路径
    相对路径：图片相对应html文件的位置
        同一级   src=""
        下一级路径      src="文件夹/img.jpg"       /
        上一级路径      src="../img.jpg"           ../

P25绝对路径
src=“绝对路径” 一般不用 \
可以用来使用网络图片 src="网址\"

P26 链接标签
        <a>标签用于定义超链接
        <a href="跳转目标" tagret="目标窗口跳出方式"> 文本或图像 </a>
        必须属性    href=""
        2.链接分类
            (1)外部链接   <a   href="">
            target 打开窗口方式默认值_self——当前页面打开      _blank——新窗口打开
            (2)内部链接     网站内部页面链接    <a href="…….html">
            (3)空链接       <a href="#">
            (4)下载链接     文件或压缩包下载    <a href="…….zip">
            (5)网页元素链接

P27 锚点链接点击链接定位到页面中位置
<a href="#two">第二集</a> 给一个id属性 two，定位 <h3 id="two">演艺经历</h3>

P29 注释标签和特殊字符
        快捷键 ctrl+/      
               空格符
        <        小于号
        >        大于号

P30 综合案例

P33 表格标签
        table   定义表格标签
        tr      定义行
        td      单元格

P34 表头单元格
td改成th 文字居中加粗

P35 表格属性
        不常用，CSS设置         属性要写到table里面去
        属性名      属性值
        align       left,center,right
        border      1或""
        cellpadding   像素值                  内容和单元格的距离
        cellspacing   像素值                单元格间距离

P36 表格结构标签
thead tbody 都是用在<table>中

P38 合并单元格
        跨行合并    rowspan="合并单元格的个数"
        跨列合并    colspan="合并单元格的个数"
        目标单元格——写合并代码

P39 表格总结

P40 列表标签————布局
        无序列表有序列表自定义列表
        1.无序列表
            <ul>
                <li>列表项1</li>
                <li>列表项2</li>
            </ul>
            <ul>中只能用li标签
            <li>里面可以用任何标签
        2.有序列表
            ol
        3.自定义列表
            <dl>
                <dt>名词
                <dd>名词解释
                <dd>

</dl>
dd dt中可以放任何标签

P41 表单标签
表单域表单控件提示信息
<form> 定义表单域属性： acion——url地址 method_表单数据提交方式 name_名称

<input> 表单元素,单标签    <input type="属性值"> type是必须属性
            <input /> 单标签
            type可以取不同属性值    text文本框 password密码框

P47 input属性值
radio是单选按钮

P48 input属性值
        name定义名称
        value规定input元素的值
        checked当页面打开默认选入
        maxlength规定输入最大字符

P51 type属性提交和重置按钮
submit提交按钮
reset重置按钮

P52普通按钮
        button 普通按钮
        file    上传文件
        标签    属性    值——————颜色不同

P35 label标签
        用于绑定表单元素，选择文本也会定位到表单
        <label for="sex">男</label>
        <input type="radio"    name="sex" id="sex">
        label标签的for属性应该跟相关元素的id一样

P54 select下拉表单元素
select option
在option中加属性 select="selected"表示默认选定

P55文本域元素textarea
cols属性每行字符数
rows显示的行数实际开发用css

HTML、CSS学习笔记（一）相关推荐

CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中背景图片 ie6 ie7 margin 杂谈分类: 网页制作 1.IE6中用了float之后导致m ...
HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...

HTML、CSS学习笔记（一）

HTML、CSS学习笔记（一）相关推荐

最新文章

热门文章