去评论
海欣资源

web网页开发的基本知识

xx5678
2022/05/03 16:42:16

    html标签语义:定义整个HTML文档,表示其中的内容为HTML语言
    head标签语义:定义文档头部,是所有头部元素的容器,包含网页的基本相关信息,比如文档的标题,不直接显示在网页内容上
    body标签语义:定义文档的主题,即网页内容的主要内容,包含文本,超链接,图像,表格和列表等

  标签的分类
    双标签:成对使用,代表标签作用范围
    单标签:开始标签的结束而结束,无需表达范围,仅在标签出现处有效
HTML元素
    元素指的是从开始标签到结束标签的所有代码
#####标签书写规范
    标签与标签之间是可以嵌套的,但先后顺序必须保持一致,比如:
<div> <p>科学</p></div>
    HTML标签对大小写不敏感
标签属性
    HTML标签可以拥有属性——为HTML元素提供附加信息
        属性书写形式:name==“value"
        属性书写位置:开始标签
        不同标签具有不同属性
标题标签和段落标签
网页元素
    网页元素是指构成网页的各项内容
    网页元素有:文字,超链接,列表,图片······
标题标签
    标题<h1>…</h1>
段落标签
    段落:网页中的一段文字
    <p>…</p>
图片标签,相对路径和绝对路径
    图片:<img/>
        属性:
            src:指明存储图像的位置(图片的路径)
            alt:为图片添加替换文本
        路径:
            绝对路径
            相对路径
                同级目录:src=“./图片名”
                **上一级目录:**src=“…/图片名”
                下一级目录:src=“目录名称/图片名”
超链接标签
    超链接:从一个网页指向另一个目标的链接关系
    <a href = " ">…</a>
    属性:
        href:必选属性,规定链接目标
        target:在何处打开目标
无序列表和有序列表
    列表:HTML支持无需列表,有序列表
    无序列表:
        <ul>
        每个列表项默认用粗体圆点进行标记
    有序列表:
        <ol>
        每个列表项默认用数字进行标记
注意事项与编码规范
注意事项:
    文件的扩展名要以.html结束
    文件名由英文字母,数字或下划线组成
    文件名不要包含特殊符号,不使用中文
编码规范:
    所有标签必须关闭
    所有标签和属性的名字都必须小写
    所有标签东都必须合理嵌套
    所有属性必须赋值,所有的属性值都必须用引号括起来

第三章
网页中插入表格
    表格的相关概念:
        表头
        行
        单元格
    相关标签:
        <table boder=“1”></table>定义一个“表格”
        <tr></tr>,定义“一行”
        <th></th>,定义”表头“
        <td></td>,定义表格中的一个单元格
表格的相关属性
属性        作用
border        表格边框的宽度
bordercolor        表格边框的颜色
background        表格背景图
bgcolor        表格背景颜色
cellpadding        单元边缘与其内容之间的距离
cellspacing        单元格之间的空白
clospan        跨列
rowspan        跨行
网页中插入表单
    表单是一个包含表单元素的区域
表单标签
    <form></form>
        语义:定义一个”表单“
    所有表单控件都必须在<form><form>标签之间
表单控件
    文本框
        <input type=“text” name=“名称” value=“文本”/>
    密码框
        <input type=“password” name=“名称” value=“文本”/>
    单选框
        <input type=“radio” name=“名称” value=“文本”/>
        **同组单选框name属性值必须相同
    复选框
        <input type=“checkbox” value=“good1” name=“goods”/>
        同组复选框name属性值需要一致,value属性值需要不同
    文件控件
        <input type=“file” name=“files”/>
    按钮
        提交按钮:type=“submit”
        重置按钮:type=“reset”
        普通按钮:type=“button”
    多行文本域
        标签:<textarea></textarea>
        相关属性:
            rows:规定文本区内可见行数
            cols:规定文本区内可见列数
    下拉列表
        <select><\select>,元素定义下拉列表
        <option></option>,定义待选择的选项
CSS
CSS简介
什么是CSS?
    CSS指的是层叠样式表
    样式定义如何显示HTML元素
    样式通常存储在样式表中
    把样式添加到HTML中,是为了解决内容与表现分离的问题
    外部样式表可以极大提高工作效率
    外部样式表通常存储在CSS文件中
    多个样式定义可层叠为一
CSS语法
    属性是您希望设置的样式属性。每个属性有一个值,属性和值被冒号分开
    css声明总是以分号;结束,声明组以大括号{}括起来
CSS注释
    CSS注释以"/*“开始,以”*/"结束
CSS Id和Class
id和class选择器
id选择器
    id选择器可以为标有特定id的HTML元素指定特定的样式
    HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义
    以下的样式规则应用于元素属性 id=“para1”:
    #para1
    {
    text-align:center;
    color:red;
    }
class选择器
    class选择器用于描述一组元素的样式,class选择器有别于id选择器,class可以在多个元素中使用
    class选择器正在HTML中以class属性表示,在CSS中,类选择器以"."显示
    在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
    .center {text-align:center;}
    你也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
    p.center {text-align:center;}
CSS 创建
插入样式表
    外部样式表
    内部样式表
    内联样式表
外部样式表
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
多重样式
如果某些属性不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。例如,外部样式表拥有针对 h3 选择器的三个属性:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性:
h3
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:
color:red;
text-align:right;
font-size:20pt;
**即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。 **
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个HTML元素被不止一个样式定义时,一般而言,所有样式会根据下面的规则层叠与一个新的虚拟样式表中,其中数字4拥有最高的优先权
    浏览器缺省设置
    外部样式表
    内部样式表
    内联样式(在HTML元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明: 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
Remark**提示:**如果你使用了外部文件的样式在 中也定义了该样式,则内部样式表会取代外部文件的样式。
CSS背景
CSS背景属性用于定义HTML元素的背景
CSS属性定义背影效果:
    background-color
    background-image
    background-repeat
    background-attachment
    background-position
背景颜色
background-color属性定义了元素的背景颜色
页面的背景颜色使用在body的选择器中:
body {background-color:#CCC;}
CSS中,颜色通常以以下的方式定义:
    十六进制,如:“#ff0000”
    RGB,如:“rgb(250,0,0)”
    颜色名称,如:“red”
背景图像
background-image属性描述了元素的背景图像
默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体
页面背景图片设置示例:
body {background-image:url('papre.gif);}
背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺
背景 - 简写属性
当使用简写属性时,属性值得顺序为::
    background-color
    background-image
    background-repeat
    background-attachment
    background-position
附加:CSS 背景属性
Property        描述
background        简写属性,作用是将背景属性设置在一个声明中。
background-attachment        背景图像是否固定或者随着页面的其余部分滚动。
background-color        设置元素的背景颜色。
background-image        把图像设置为背景。
background-position        设置背景图像的起始位置。
background-repeat        设置背景图像是否及如何重复。
CSS Text文本格式
text color
颜色属性被用来设置文字的颜色
颜色是通过CSS最经常的指定:
    十六进制值 - 如"#FF0000"
    一个RGB值 - “RGB(255,0,0)”
    颜色的名称 - 如"红"
一个网页的背景颜色是指在主体内的选择:
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本对齐方式
文本排列属性是用来设置文本的水平对齐方式
文本可居中或对齐到左或右,两端对齐
当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)
例如:
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
text-decoration属性用来设置或删除文本的装饰
文本转换
文本转换属性用来指定在一个文本中的大小写字母,可用于所有的字句变成大小写,或者单个单词首字母大写
附加:所有CSS文本属性。
属性        描述
color        设置文本颜色
direction        设置文本方向。
letter-spacing        设置字符间距
line-height        设置行高
text-align        对齐元素中的文本
text-decoration        向文本添加修饰
text-indent        缩进元素中文本的首行
text-shadow        设置文本阴影
text-transform        控制元素中的字母
vertical-align        设置元素的垂直对齐
white-space        设置元素中空白的处理方式
word-spacing        设置字间距

原文链接:https://blog.csdn.net/qq_53358173/article/details/115971714