Html与Css标签入门

用户9593612666232
146 阅读9分钟

Html头部的基本格式与Html标签用法

  1. 标记\

    位于文档最前面，使用html5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面，浏览器才能将该网页作为有效的html文档。

  2. < html >标记
    该标记位于标记 之后，该标记意味着html文档的开始和结束，在它之间的是文档的头部和主体内容。

  3. < head >标记
    在< html >标记 之后，定义html文档的头部信息，也称头部标记。

  4. < body >标记
    主体标记

  5. < link >标记
    该标记用于导入脚本或者css文件等,用于链接样式表，他是空元素 \

body中的种种标签

一些基本的html标签都介绍完了，这些一般是比较常用的

现在介绍一些表单元素吧

image.png 这里是最基本的一些表单元素，现在我来一一介绍用法

在最外层先设置form标签包裹 然后在其中加上需要的样式内容 绝大部分运用input标签然后在其type属性中设置需要的元素 当然也还有一些特殊的用法比如下拉列表select

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

还有textarea元素，这个元素一般是用来定义大文本框的，方便用户可以自己写较多的内容，当然此文本框的大小也是由自己来定

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

 元素定义可点击的按钮，简单的来说就是定义一个可以点击的按钮，可以在属性内设置单击或者双击反应等

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

HTML5 元素  元素为 元素规定预定义选项列表。 用户会在他们输入数据时看到预定义选项的下拉列表。 元素的 list 属性必须引用 元素的 id 属性。 下面是实例：

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

简单的来说呢一个表单的结构就是在form表单之中添加自己想要的属性

然后设置按钮来响应服务器，最后通过submit属性按钮提交给服务器的这个流程，为了表单的美观也可以将表单嵌套在表格table之中，总体来说，前端页面的设计在将这些前端代码熟悉以后就可以随心所欲的设计成自己想要的样子了。

前端定义链接的几个常用属性

1.这个属性定义文档与外部资源的关系，可以引用外部资源和你里面的文档结合产生响应的效果，最常用的就是导入css文件。 2.这个属性是定义一个链接，简单来说就是你在鼠标点击此属性之中的文本时会跳转到a标签属性的href之中设置的链接里面去。此标签自带属性变色下划线还有鼠标移入加粗变色等等属性。 3.

这个属性是近几年才添加的新标签，是用来定义导航链接的，用法与a标签差别不大

之后就是css标签简单的用法与入门了

css标签简单的解释就是给你的页面代码也就是html文档之中的属性设置样式，颜色啊大小啊还有位置特效动画等等。在头部中写样式，示例如下:

一般有两种设置方法

1.在head标签中设置属性然后在下面输出样式 2.通过link属性导入后缀名为css的文件来给页面添加属性

css基本属性设置

选择器：

选择器示例示例说明CSS
.class.intro选择所有class="intro"的元素1
#id#firstname选择所有id="firstname"的元素1
**选择所有元素2
elementp选择所有

元素

1
element,elementdiv,p选择所有
元素和

元素

1
element elementdiv p选择
元素内的所有

元素

1
element>elementdiv>p选择所有父级是
元素的

元素

2
element+elementdiv+p选择所有紧跟在
元素之后的第一个

元素

2
[attribute][target]选择所有带有target属性元素2
[attribute=value][target=-blank]选择所有使用target="-blank"的元素2
[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素2
[[attribute=language]](www.runoob.com/cssref/sel-…)[lang=en]选择 lang 属性等于 en，或者以 en- 为开头的所有元素2
:linka:link选择所有未访问链接1
:visiteda:visited选择所有访问过的链接1
:activea:active选择活动链接1
:hovera:hover选择鼠标在链接上面时1
:focusinput:focus选择具有焦点的输入元素2
:first-letterp:first-letter选择每一个

元素的第一个字母

1
:first-linep:first-line选择每一个

元素的第一行

1
:first-childp:first-child指定只有当

元素是其父级的第一个子级的样式。

2
:beforep:before在每个

元素之前插入内容

2
:afterp:after在每个

元素之后插入内容

2
:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有

元素

2
element1~element2p~ul选择p元素之后的每一个ul元素3
[attribute^=value]a[src^="https"]选择每一个src属性的值以"https"开头的元素3
[attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素3
[attribute*=value]a[src*="runoob"]选择每一个src属性的值包含子字符串"runoob"的元素3
:first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素3
:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3
:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3
:only-childp:only-child选择每个p元素是其父级的唯一子元素3
:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素3
:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数3
:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素3
:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素，从最后一个子项计数3
:last-childp:last-child选择每个p元素是其父级的最后一个子级。3
:root:root选择文档的根元素3
:emptyp:empty选择每个没有任何子级的p元素（包括文本节点）3
:target#news:target选择当前活动的#news元素（包含该锚名称的点击的URL）3
:enabledinput:enabled选择每一个已启用的输入元素3
:disabledinput:disabled选择每一个禁用的输入元素3
:checkedinput:checked选择每个选中的输入元素3
:not(selector):not(p)选择每个并非p元素的元素3
::selection::selection匹配元素中被用户选中或处于高亮状态的部分3
:out-of-range:out-of-range匹配值在指定区间之外的input元素3
:in-range:in-range匹配值在指定区间之内的input元素3
:read-write:read-write用于匹配可读及可写的元素3
:read-only:read-only用于匹配设置 "readonly"（只读） 属性的元素3
:optional:optional用于匹配可选的输入元素3
:required:required用于匹配设置了 "required" 属性的元素3
:valid:valid用于匹配输入值为合法的元素3
:invalid:invalid用于匹配输入值为非法的元素

当然虽然选择器的种类繁多但是常用的选择器一般只有几个，熟练使用对你做网页肯定来说是不会出现什么问题的，但是只要愿意学这些选择器记住肯定是越多越好的

常用的选择器

  1. class选择器 一般在body之中加上class="xxx" 然后在css中使用.xxx｛然后里面加上想要的属性} class选择器可以有无数个，名字也可以重复相同但是会共用他们在css之中设置的所有属性。 如果在css之中设置了两个或以上相同的属性的话会以后设置的为准，没有相同的会以上一次设置的为准。

  2. id选择器 用法与class大致相同，但是id选择器有且只有一个不能有多个，在css之中用#来设置选中然后｛｝在大括号之中设置其属性，在html元素之中直接以

    来设置

  3. *选择器 用来设置html之中的全体元素给他们加上共同的样式，也可以用来初始化页面

css常用标签

文本属性

image.png

图片或者文字大小

image.png

定位

内边距

image.png

外边距

image.png

在position中一般用到top left right bottom这四个属性来调整元素位置， 在position中有两个元素用来定位其中初始位置在哪里

  1. fiex定位一般默认在元素窗口位置
  2. absulote定位也叫绝对定位，一般设置在绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
  3. relative一般设置在你要移动的元素之上，用上下左右四个属性来移动他相对于父容器也就是绝对定位最左上角的位置。

image.png

边框的属性

默认设置为border：1px（边框粗细） solid（直线实线，也可以设置虚线） #fffff（设置边框颜色）

image.png

背景属性

image.png

列表

设置清楚所有属性为list-style: none;

image.png

设置字体属性

可以设置字体宽高字距颜色和大小等等，详细请看下

image.png

动画效果

基本属性加完之后可以考虑动画效果让你的页面变得更精美动态

可以加鼠标移入移除颜色变化等动画效果

image.png

弹性盒子属性

display:flex 块级弹性盒子

display:inline-flex 行级弹性盒子

  1. 放在容器盒子中的元素即为弹性元素（包括文本）。
  • 不能使用float与clear规则
  • 弹性元素均为块元素
  • 绝对定位的弹性元素不参与弹性布局

image.png

超链接样式

image.png

分页

image.png

超链接

image.png

语音属性

CSS语音速率属性以每分钟字数指定语音速率。使用以下值设置速率

voice-rate: [normal | x-slow | slow | medium | fast | x-fast]

上方，如果您想降低语音速率，请设置慢；要慢一点，请设置x慢

image.png

avatar
文章
阅读
粉丝